Question

我有点击功能设置，当您点击.click div时，它会获取data-hook属性，并将其作为data-filter属性添加到.button div，这工作正常，但每次点击后它都会用新的data-filter属性替换，理想情况下我想在每次点击时为属性添加一个新值，用逗号分隔每个值。
这是一个jsFiddle演示：http://jsfiddle.net/neal_fletcher/pSZ2G/

HTML

<div class="button">THIS</div>
<div class="click" data-hook="one">CLICK</div>
<div class="click" data-hook="two">CLICK</div>
<div class="click" data-hook="three">CLICK</div>
<div class="click" data-hook="four">CLICK</div>
<div class="click" data-hook="five">CLICK</div>

jQuery的：

$(".click").click(function () {
    var thing = $(this).attr("data-hook");
    $('.button').attr('data-filter', thing);
});

如果可能的话？任何建议将不胜感激！

Answer 1

您可以存储以前的值，并可以使用新的点击值进行连接，例如。

$(".click").click(function () {
    var thing = $(this).attr("data-hook");
    var earData = $('.button').attr('data-filter');
    if(typeof earData != 'undefined'){
        $('.button').attr('data-filter', earData + ","+thing);
    }else{
        $('.button').attr('data-filter', thing);
    }
});

DEMO

Answer 2

$(".click").click(function () {
    var thing = $(this).attr("data-hook")||'';
    var df = $('.button').attr('data-filter')||'';
    $('.button').attr('data-filter', df+','+thing)
});

在旁边注释..我希望你没有任何其他带有.button类的元素..如果你想要更新单个目标，你应该用id attrib引用。

Answer 3

$(".click").click(function () {
   var thing = $(this).attr("data-hook");
   var prevValue = $('.button').attr('data-filter');
   if(prevValue){
       $('.button').attr('data-filter', prevValue +','+thing)
   }
   else{
       $('.button').attr('data-filter', thing)
   }

}）;

jQuery：使用每个click功能添加多个数据属性

3 个答案: