jQuery: add multiple data attributes with each click function

Question

I have a click function setup whereby when you click on the .click div, it takes the data-hook attribute, and add it as a data-filter attribute to the .button div, this works fine, but after each click it is replacing the data-filter attribute with the new one, ideally I want to add a new value to the attribute with each click, separating each value with a comma.
Here's a jsFiddle demo: 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);
});

If this is at all possible? Any suggestions would be greatly appreciated!

Suman Bogati · Accepted Answer · 2014-03-16 18:57:38Z

1

You can store the previous value and can concatinate with new clicked value, something like.

$(".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

edited Mar 16, 2014 at 18:57

answered Mar 16, 2014 at 18:19

Suman Bogati

6,3612 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikhil Mittal · Accepted Answer · 2014-03-16 18:17:03Z

0

$(".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)
   }

});

answered Mar 16, 2014 at 18:17

Nikhil Mittal

4403 silver badges15 bronze badges

Comments

CrayonViolent · Accepted Answer · 2014-03-16 18:20:59Z

0

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

on a side note.. I hope you don't have any other elements with a .button class in it.. if you're looking to update a single target, you should reference by an id attrib instead.

edited Mar 16, 2014 at 18:20

answered Mar 16, 2014 at 18:15

CrayonViolent

32.6k6 gold badges61 silver badges80 bronze badges

Collectives™ on Stack Overflow

jQuery: add multiple data attributes with each click function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related