2

如果我返回匹配的 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.");
    }
});
4

2 回答 2

4

我建议：

$.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'之后?和之前:），如果发现为假，则返回返回第二个值/变量（后面的那个:）并将返回的值/变量分配给变量名。

于 2012-08-28T15:19:50.233 回答
1

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

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)?'red':'green')

于 2012-08-28T15:30:32.033 回答