Question

下面我有代码循环一个项目列表，我想删除一个类＆＃34;危险＆＃34;来自div class item-left if element.hazardous == no。我现在设置它的方式不起作用，我想知道是否可能是因为我需要找到一种方法来定位特定的非危险数组元素。

什么＆＃34;危险＆＃34;在我的CSS中，如果危险类是活动的，它会添加一个坚实的红色边框。否则隐藏红色边框。

function showProducts(items) {
    var itemsHTML = [];
    items.forEach(function(element) {
        var url = element.url ? element.url : 'http://placehold.it/100x100'
        itemsHTML.push('<li><div class="item-left hazardous" data-product-id="' + element.id + '"><p><span class = "prod-name">' +
            'Product: ' + element.product + '</p></span><span class="prod-loc">' +
            'Location: ' + element.location + '</span><span class="qty">' +
            'Quantity: ' + element.quantity + '</span></div>' +
            '<div class="item-right"><img src="' + url + '"></div></li>')
        if (element.hazardous == 'no') {
            $('.item-left').removeClass('hazardous')
        }
    });
    $('.results').html(itemsHTML) 
}

Answer 1

不是首先对hazardous类进行硬编码，而是在将标记呈现给DOM之前有条件地应用它：

function showProducts(items) {
var itemsHTML = [];
items.forEach(function(element) {
    var classes = ['item-left', element.hazardous === 'no' ? '' : 'hazardous'].join(' ').trim() 
    var url = element.url ? element.url : 'http://placehold.it/100x100'
  itemsHTML.push('<li><div class="' + classes + '" data-product-id="' + element.id + '"><p><span class = "prod-name">' +
    'Product: ' + element.product + '</p></span><span class="prod-loc">' +
    'Location: ' + element.location + '</span><span class="qty">' +
    'Quantity: ' + element.quantity + '</span></div>' +
    '<div class="item-right"><img src="' + url +
    '"></div></li>')
});
$('.results').html(itemsHTML)

你遇到的一个问题是你试图从一个尚未存在的DOM元素中删除一个类 - 此时它仍然是一个字符串。

在循环遍历数组时，如何在符合特定条件的元素中添加/删除类？

1 个答案: