Question

我正在尝试创建一个模块，让用户可以比较不同的产品。当用户点击添加进行比较时，它会在比较框的data-list属性中附加该产品的ID，这部分工作正常。

主要问题是当我尝试从比较框访问该数据属性值时，它只返回第一次点击的值。

例如，假设用户添加了三个产品来比较框，但是如果他点击比较框，它将返回这3个产品，但如果他/她试图删除所选产品data-attribute仍然返回那3个产品，最初添加，既没有添加新产品比较框也没有从比较框中删除任何产品。

这是代码：
的 HTML

<div class="checkbox-inline col-md-12 col-sm-12 col-xs-12" style="margin-left: 10px">
<label><input type="checkbox" class="compare-result" 
id="compare-<?php echo $product_id;?>" value="<?php echo $product_id;?>">
Compare</label>
</div>

<a href="#">
 <div class="compare" id = "compare-box" data-list = "" >
  <div  style="margin-bottom: 5px;padding: 0px;font-size:13px">
   <h4>Compare Results (<span id="compare-items"></span>)</h4>
  </div>
 </div>
</a>

Jquery

var count = 0
var list = $("#compare-box").attr('data-list');
if(list)
{
  list = JSON.parse(list);
}
else
{
  list = [];
}
$(".compare-result").on('click',function(){ 
if($(this).is(":checked"))
{
if(count < 4)
    {
        var id = $(this).val();
        list.push(id);
        count++;        
    }
    else
    {
        event.preventDefault();
        $('input.compare-result').not(':checked').attr("disabled",true);
        alert('you can only compare 4 product');
    }
}
else
{
    var id = $(this).val();
    count--;
    if(count < 4)
    {
        var index = list.indexOf(id);
        if (index > -1) {
            list.splice(index, 1);
        }
        $('input.compare-result').not(':checked').attr("disabled",false);
    }
    else
    {
        alert('error');
    }   
}
selectedList = JSON.stringify(list);
$("#compare-box").attr('data-list',selectedList);
$("#compare-items").html(count);
console.log(selectedList);
});

//Main Problem
$("#compare-box").on('click',function(){
var data = $("#compare-box").attr('data-list');
console.log(data);
});

Answer 1

您使用的数据API错误。 <div data-list="">仅告知浏览器此元素具有预定义的数据API元素。稍后，任何操作都将使用内存中的数据对象（在元素的DOM表示中不可见）。

要获取/设置数据属性，您必须使用$(selector).data('key', valueToSet)。

所以$("#compare-box").data('list');和$("#compare-box").data('list', selectedList);

在click事件中访问jquery中动态创建的data-attribute

1 个答案: