jquery - 比较jquery中的2个价格，如果它们匹配添加一个类？

Question

如果我返回的 2 个价格匹配，我将如何向 jquery 中的元素添加一个类？

假设两个项目(Price1 和 Price2)都通过 JSON 返回，如果它们匹配，则将 class="red"添加到元素。

下面是我现有的代码，我需要匹配 res.amzprice 和 res.lowprice，如果两者匹配，我需要向 res.lowprice td 添加一个类:)

 $.ajax({ type: "POST",
    url: "aWeb.asmx/GetLowPrices",
    data: "{ }",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        $('#loading').hide();
        var result = response.d;
        var new_record = "";
        $.each(result, function (index, res) {
            new_record = "<tr id=\"" + res.sku + "\">" +
                         "<td scope=\"row\" class=\"t-left\"><a href=\"../product/editproduct.aspx?sku=" + res.sku + "\" title=\"Edit this product listing\">" + res.title + "</a></td>" +
                         "<td>" + res.sku + "</td>" +
                         "<td> £" + res.tprice + "</td>" +
                         "<td class=\"amzprice-edit\"><input type=\"text\" id=\"txt" + res.sku.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-') + "\" value=\"" + res.amzprice + "\"> <img src=\"images/icons/info.png\" alt=\"Info\" title=\"Price (inc. Shipping): £xx.xx\" /></td>" +
                         "<td> £" + res.lowprice + " <img src=\"images/icons/info.png\" alt=\"Info\" title=\"Price: £xx.xx | Shipping: £xx.xx\" /> <a href=\"lowpricedata.aspx?sku=" + res.sku + "\" id=\"lnkInfoGrpah\" class=\"link-to info-graph\" data-fancybox-type=\"iframe\"><img src=\"images/icons/graph-icon.png\" alt=\"Info\" title=\"View Lowprice History\" /></a></td>" +
                         "<td><div class=\"twe-button mini update\">Update</div></td>" +
                         "</tr>";

            $('#dataResults').append(new_record);
        });

    },
    error: function (msg) {
        $('#loading').hide();
        $('#dataTable').hide();
        $('#infoMsg').show();
        $('#infoMsg').addClass('er-red');
        $('#infoMsg').html("Error while calling web service.");
    }
});

Answer 1

我建议:

$.each(result, function (index, res) {

    var lowPriceClass = res.amzprice == res.lowprice ? 'red' : 'noMatch';

    new_record = "<tr id=\"" + res.sku + "\">" +
                 "<td scope=\"row\" class=\"t-left\"><a href=\"../product/editproduct.aspx?sku=" + res.sku + "\" title=\"Edit this product listing\">" + res.title + "</a></td>" +
                 "<td>" + res.sku + "</td>" +
                 "<td> £" + res.tprice + "</td>" +
                 "<td class=\"amzprice-edit\"><input type=\"text\" id=\"txt" + res.sku.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-') + "\" value=\"" + res.amzprice + "\"> <img src=\"images/icons/info.png\" alt=\"Info\" title=\"Price (inc. Shipping): £xx.xx\" /></td>" +
                 "<td class='" + lowPriceClass + "'> £" + res.lowprice + " <img src=\"images/icons/info.png\" alt=\"Info\" title=\"Price: £xx.xx | Shipping: £xx.xx\" /> <a href=\"lowpricedata.aspx?sku=" + res.sku + "\" id=\"lnkInfoGrpah\" class=\"link-to info-graph\" data-fancybox-type=\"iframe\"><img src=\"images/icons/graph-icon.png\" alt=\"Info\" title=\"View Lowprice History\" /></a></td>" +
                 "<td><div class=\"twe-button mini update\">Update</div></td>" +
                 "</tr>";

    $('#dataResults').append(new_record);
});

虽然我觉得任何显示 lowPrice 的元素都应该评估“低价”是否小于或等于，而不是简单地等于，所以我真的建议:

    var lowPriceClass = res.amzprice <= res.lowprice ? 'red' : 'noMatch';

此方法使用三元运算符来评估条件以返回 bool 值，如果发现为 true，则返回第一个值/变量(在本例中为 'red' 之后和 ? 之前的 : )(如果找到)如果为 false，则返回第二个值/变量(: 之后的那个值/变量)并将返回的值/变量分配给变量名称。