Question

我有以下jQuery代码，但它没有更改在CSS中设置为红色的负数的颜色，但是在控制台中，预期的颜色已得到纠正。

这是一个通过AJAX动态创建行的表。

在这里，我的jQuery代码处理使用AJAX从数据库检索的数据。

Input.

下面是页面和浏览器控制台的屏幕截图；

Answer 1

要获得预期结果，请使用.eq（）的以下选项将样式应用于该特定行，请查看此eq（index）链接以了解更多详细信息-https://api.jquery.com/eq-selector/

$(".mystyle:eq("+q+")")

codepen-https://codepen.io/nagasai/pen/pOMBXq

var data = [{
  "remaining":-1,
  "id":1,
  "title":"test",
  "surname":"zzz",
  "name":"yyy"
},{
  "remaining":10,
  "id":2,
  "title":"test2",
  "surname":"zzz2",
  "name":"yyy2"
}]

$.each(data, function (q, z) {
                    var rem = z.remaining;
                    console.log('rem ' + rem, q);
                     $("#tbody").append('<tr><td><input type="checkbox" name="tick" id="tick"></td><td class="id">' + z.id + '</td><td class="title">' + z.title + '</td><td class="name">' + z.name + '</td><td class="surname">' + z.surname + '<span class="mystyle"> (' + rem + ')</span>' + '</td><td class="sessions"><select name="sessions" id="sessions" class="sesVal"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="4">4</option></select></td><td class="amount"></td></tr>');
                    if(rem >= 1) {
                        $(".mystyle:eq("+q+")").css('color','green');
                        console.log('green');
                    }
                     if(rem < 0) {
                        $(".mystyle:eq("+q+")").css('color','red');
                        console.log('red');
                     }
                    });

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

Answer 2

这就是我要做的：

$.each(data, function (q, z) {
  var rem = z.remaining;
  var colorClass = '';
  if(rem >= 1) {
    colorClass = 'green';
  } else if(rem < 0) {
    colorClass = 'red';
  }
  console.log('rem ' + rem);
  $("#tbody").append('<tr><td><input type="checkbox" name="tick" id="tick"></td><td class="id">' + z.id + '</td><td class="title">' + z.title + '</td><td class="name">' + z.name + '</td><td class="surname">' + z.surname + '<span class="' + colorClass + '"> (' + rem + ')</span>' + '</td><td class="sessions"><select name="sessions" id="sessions" class="sesVal"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="4">4</option></select></td><td class="amount"></td></tr>');
});

您新添加的CSS：

.red { color: red; }
.green { color: green; }

Answer 3

类不是唯一的，这意味着多个元素可以具有相同的名称。因此，如果您决定使用类名称更改元素的颜色，则具有该类名称的所有元素都会更改颜色。

if(rem >= 1) {
    $(".mystyle").css('color','green');
    console.log('green');
}
if(rem < 0) {
    $(".mystyle").css('color','red');
    console.log('red');
}

在这里，您要告诉代码将mystyle类名称为rem的所有元素更改为绿色，如果<span class="mystyle"+rem> (' + rem + ')</span> if(rem >= 1) { $(".mystyle" + rem).css('color','green'); console.log('green'); } if(rem < 0) { $(".mystyle" + rem).css('color','red'); console.log('red'); }大于1，则更改为红色，如果其小于1。

您可以为其添加唯一的ID：

geom_ribbon

使用jQuery动态更新CSS属性

3 个答案: