2

2つの価格が一致した場合、jqueryの要素にクラスを追加するにはどうすればよいですか？

要素にaddclass= "red"が一致する場合、両方のアイテム（Price1とPrice2）がJSON経由で返されるとします。

以下は私の既存のコードです。res.amzpriceとres.lowpriceを一致させる必要があります。両方が一致する場合は、res.lowpricetdにクラスを追加する必要があります:)

 $.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'後?と前:）を返し、偽であることが判明した場合は、 2番目の値/変数（の次の値）を返し、その戻り:値/変数を変数名に割り当てます。

于 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 に答える