Question

我正在尝试对jQuery使用动态更新的数据属性。

当我第一次单击按钮时，clientPrefID会获取正确的数据。在我的ajax调用中，我返回下一个首选项ID，并更新成功函数中的数据，以便可以使用不同的数据集执行相同的操作。当我检查页面上的元素时，我可以看到data-client-pref-id正确更新了。但是，当我单击下一步按钮时，clientPrefID仍然是旧值！参见下文，我提醒该值以检查这是否是问题。

这是JavaScript：

$(document).on('click', '.pref-btn', function(e) {
    var clientPrefID = $(this).data('client-pref-id');
    var score = $(this).data('score');

    // see if clientPrefID is correct value 
    alert(clientPrefID);

    $.ajax({
        type: 'POST',
        url: '/portal/includes/ajax_portal.php',
        dataType: 'json',
        data: {
            theAction: "updatePreferenceScore",
            clientPrefID: clientPrefID,
            score: score
        },
        success: function(data) {
            if (data.error == undefined) {
                //if the data did not return errors,
                //update the item name and image and preference id
                $('#item-name').html(data.plu_commodity_name);
                $('#item-img').html("<img src=\"../images/item_images/plu_items/" + data.ifps_image_source + "\" height='100px'>");
                $('.pref-btn').each(function() {
                    $(this).attr("data-client-pref-id", data.client_pref_id);
                });
            } else {
                console.log(data.error)
            }
        }
    })
});

这是html

<div class="row my-3 text-center">
    <div class="col-4">
        <div class="card mx-2 py-3 pref-btn pointer" data-score="2" data-client-pref-id="<?php echo $next_pref_plu['client_pref_id']; ?>">
            <div class="card-body">
                <h5>NO</h5>
                <img src="../images/x.png" height="75px">
            </div>
        </div>
    </div>
    <div class="col-4">
        <div class="card mx-2" style="border:none">
            <div class="card-body">
                <h4 id="item-name"><?php echo $next_pref_plu['plu_commodity_name']; ?></h4>
                <div id="item-img"><img src="../images/item_images/plu_items/<?php echo $next_pref_plu['ifps_image_source']; ?>" height="100px"></div>
            </div>
        </div>
    </div>
    <div class="col-4">
        <div class="card mx-2 py-3 pref-btn pointer" data-score="1" data-client-pref-id="<?php echo $next_pref_plu['client_pref_id']; ?>">
            <div class="card-body">
                <h5>YES</h5>
                <img src="../images/check.png" height="75px">
            </div>
        </div>
    </div>
</div>

Answer 1

要设置数据属性，请使用：

$(this).data("client-pref-id", data.client_pref_id);

代替

$(this).attr("data-client-pref-id", data.client_pref_id);

如果我没记错的话，新值将不会显示在检查器中，但会保留在jQuery的内存中。

请注意，如果多次使用$(this)，将其存储在变量中会更快。

这样的事情。

var t = $(this);

var clientPrefID = t.data('client-pref-id');
var score = t.data('score');

在jQuery中使用动态更新的数据属性

1 个答案: