Question

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

假设两个项目（Price1和Price2）都是通过JSON返回的，如果它们与一个元素匹配add 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';

这种方法使用三元运算符来评估条件以返回布尔值，如果发现它为真，则返回第一个值/变量（在这种情况下为'red'之后的?和在:之前，如果发现它是假的，那么它返回第二个值/变量（ :之后的那个）并将返回的值/变量赋给变量名。

Answer 2

三元条件是您在这里寻找的：

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="+((res.lowprice===res.amzprice)?'red':'green')"+> £" + 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);

此条件将检查价格并相应地分配课程，如果匹配则给出“红色”课程或“绿色”课程。我用“===”进行严格检查

（（res.lowprice === res.amzprice） '红'： '绿色'）

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

2 个答案: