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

Posted 2023-05-09

【中文标题】如果满足条件，则在动态 div 中隐藏按钮

【英文标题】：Hide a button in the dynamic div if it satisfies a condition

【发布时间】：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>

【参考方案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>