Question

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

我从我的对象数组生成所有这些动态div，它保存了类型=＆＃34; external＆＃34;的对象的数据。或＆＃34;内部＆＃34;。

每个动态div都会有一个名为“＆＃39; box”的类。每个动态编辑按钮都有一个名为＆＃39; edit-btn＆＃39;。

的类

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

我如何实现这一目标？

＆＃13;

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')
      )
    )
  });
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用Conditional (ternary) Operator

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

＆＃13;

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'): ''
      )
    )
  });
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: