如果满足条件，则在动态 div 中隐藏按钮答案

【问题标题】：Hide a button in the dynamic div if it satisfies a condition如果满足条件，则在动态 div 中隐藏按钮
【发布时间】：2017-09-19 13:41:57
【问题描述】：

我有一个动态 div，其中包含一些信息和一个编辑按钮。但是，其中一些动态 div 应该是可编辑的。

我正在从我的对象数组中生成所有这些动态 div，其中包含 type="external" 或 "internal" 的对象的数据。

每个动态 div 都有一个名为“box”的类，每个动态编辑按钮都有一个名为“edit-btn”的类。

所以，我有一个条件，如果在动态 div 中，obj.type="external" 那么编辑按钮应该可用，否则它应该被隐藏。

我如何做到这一点？

var myData = [{company: "ABC", url:"www.abc.com", type:"internal"},{company: "CDE", url:"www.cde.com", type:"internal"},{company: "DEF", url:"www.def.com", type:"external"},{company: "EFG", url:"www.efg.com", type:"internal"},{company: "FGH", url:"www.fgh.com", type:"external"}];
$('#createData').click(function(){
  createDisplay();
});

function createDisplay(){
  myData.forEach(function(obj){
    $('.container').append(
      $('<div>').addClass('box').append(
        $('<label>').text('Company Website: '),
        $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company),
        $('<br /><button>').addClass('.edit-btn').text('Edit')
      )
    )
  });
}

.box{
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="container">
			
</div>

<button id="createData">Create divs</button>

【问题讨论】：

标签： jquery arrays object if-statement dynamic

【解决方案1】：

您可以使用Conditional (ternary) Operator

obj.type =='internal'? $('<br /><button>').addClass('.edit-btn').text('Edit'): ''

var myData = [{company: "ABC", url:"www.abc.com", type:"internal"},{company: "CDE", url:"www.cde.com", type:"internal"},{company: "DEF", url:"www.def.com", type:"external"},{company: "EFG", url:"www.efg.com", type:"internal"},{company: "FGH", url:"www.fgh.com", type:"external"}];
$('#createData').click(function(){
  createDisplay();
});

function createDisplay(){
  myData.forEach(function(obj){
    $('.container').append(
      $('<div>').addClass('box').append(
        $('<label>').text('Company Website: '),
        $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company),
        obj.type =='internal'? $('<br /><button>').addClass('.edit-btn').text('Edit'): ''
      )
    )
  });
}

.box{
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="container">
			
</div>

<button id="createData">Create divs</button>

【讨论】：