Question

我正在使用jQuery动态添加div，如下所示：

$('#content').append('<div class="tiles color m-b-10">some text</div>');

如果x＆gt;我希望将类值“color”替换为“green” 0，“红色”否则

我尝试了以下（在变体中，没有引号，单引号和双引号等）但似乎没有任何效果。

$('#content').append('<div class="tiles'+ x > 0 ? "green" : "red"+ ' m-b-10">some text</div>');`enter code here`

我的问题是a）可行吗？ b）如果是，怎么做？

Answer 1

这是你想要的吗？

＆＃13;

$(document).ready(function(){
  var x = 5;
  var color = x > 0 ? 'green' : 'red'; // Preprocess the class first 
  $('#content').append('<div class="tiles ' + color + ' m-b-10"></div>'); 
  
  x = -1;
  var color = x > 0 ? 'green' : 'red'; // Preprocess the class first 
  $('#content').append('<div class="tiles ' + color + ' m-b-10"></div>'); 
  
  // For one liner solution
  x = 10;
  $('#content').append('<div class="tiles ' + ( x > 0 ? 'green' : 'red') + ' m-b-10"></div>'); 
});

＆＃13;

div {
  width: 50px;
  height:50px;
}
.green{
   background-color: green; 
}

.red {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
</div>

＆＃13;

Answer 2

我这将有效

$('#content').append('<div class="tiles '+ (x > 0 ? "green" : "red")+ ' m-b-10">some text</div>');

使用jQuery有条件地动态添加div类

2 个答案: