jQuery Loop not switching attributes

Question

I have a jQuery each loop to loop through elements but it is not updating once a status has been changed.

<span class="btn btn-icon btn-rounded btn-info social_selector" data-network="twitter" data-account-id="1" data-active='1'>
<i class="fa fa-twitter"></i>
</span>
<span class="btn btn-icon btn-rounded indigo social_selector" data-network="facebook" data-account-id="1" data-active='1'>
<i class="fa fa-facebook"></i>
</span>
<span class="btn btn-icon btn-rounded btn-warning social_selector" data-network="instagram" data-account-id="1" data-active='1'>
<i class="fa fa-instagram"></i>
</span>

The jQuery loop is as follows;

//Social Selector
    $(document).on('click','.social_selector',function(){

        if($(this).attr('data-active') == 1){
            $(this).addClass('btn-disabled');
            $(this).attr('data-active', 0);
        }else{
            $(this).removeClass('btn-disabled');
            $(this).attr('data-active', 1);
        }

        var networks = "";
        $(".social_selector").each(function(index, element){
            if($(element).data('active') == "1"){
                networks += $(element ).data('network')+', ';
            }
        });
        $('#social_network_holder').val(networks);

    });

The data-active is changed on each click when the jQuery loop is then ran so I am not sure if it is because the Dom is being updated between the loops?

//Social Selector
$(document).on('click', '.social_selector', function() {

  if ($(this).attr('data-active') == 1) {
    $(this).addClass('btn-disabled');
    $(this).attr('data-active', 0);
  } else {
    $(this).removeClass('btn-disabled');
    $(this).attr('data-active', 1);
  }

  var networks = "";
  $(".social_selector").each(function(index, element) {
    if ($(element).data('active') == "1") {
      networks += $(element).data('network') + ', ';
    }
  });
  $('#social_network_holder').val(networks);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<span class="btn btn-icon btn-rounded btn-info social_selector" data-network="twitter" data-account-id="1" data-active='1'>
    <i class="fa fa-twitter"></i>
    </span>
<span class="btn btn-icon btn-rounded indigo social_selector" data-network="facebook" data-account-id="1" data-active='1'>
    <i class="fa fa-facebook"></i>
    </span>
<span class="btn btn-icon btn-rounded btn-warning social_selector" data-network="instagram" data-account-id="1" data-active='1'>
    <i class="fa fa-instagram"></i>
    </span>

Yep, still get the same result. When I print .data('active') I get the first one updated then everything after that doesn't change. Normally it happens with click actions however I would do $(document).on() but I cannot do $(document) for an each function? — Kieran Headley
– Kieran Headley, Commented Jan 12, 2016 at 6:52
In addition to .data('active') == "1", are you certain you have an input with the id social_network_holder and not a div or other that would need .html() ? Otherwise it works You dont show that part here ; ) — Wesley Smith
– Wesley Smith, Commented Jan 12, 2016 at 6:53
@gurvinder372 that bit works fine jsfiddle.net/unzjakt0/19 Im thinking it has to be his input, the one thing the OP wont show us, lol — Wesley Smith
– Wesley Smith, Commented Jan 12, 2016 at 7:02
updated the fiddle that updates the textbox jsfiddle.net/unzjakt0/20 — gurvinder372
– gurvinder372, Commented Jan 12, 2016 at 7:07

gurvinder372 · Accepted Answer · 2016-01-12 07:10:50Z

1

replace data() method with attr() method

   $(".social_selector").each(function(index, element){
        if($(element).attr('data-active') == "1"){
            networks += $(element ).data('network')+', ';
        }
    });

answered Jan 12, 2016 at 7:10

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

Comments

Wesley Smith · Accepted Answer · 2016-01-12 07:11:43Z

Change your code to the below which uses .data('active') instead of .attr('data-active') or you could change them all to .attr('data-active'), either way , just make sure they are all the same, you have one that is different:

   $(document).on('click','.social_selector',function(){
        var $this=$(this);
        
        if($this.data('active') == 1){
            $this.addClass('btn-disabled');
            $this.data('active', 0);
        }else{
            $this.removeClass('btn-disabled');
            $this.data('active', 1);
        }

        var networks = "";
        $(".social_selector").each(function(index, element){
            if($(element).data('active') == 1){
                networks += $(element ).data('network')+', ';
            }
        });
        $('#social_network_holder').val(networks);

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="btn btn-icon btn-rounded btn-info social_selector" data-network="twitter" data-account-id="1" data-active='1'>twitter
<i class="fa fa-twitter"></i>
</span>
<span class="btn btn-icon btn-rounded indigo social_selector" data-network="facebook" data-account-id="1" data-active='1'>facebook
<i class="fa fa-facebook"></i>
</span>
<span class="btn btn-icon btn-rounded btn-warning social_selector" data-network="instagram" data-account-id="1" data-active='1'>instagram
<i class="fa fa-instagram"></i>
</span>
<input class="form-control" required="required" id="social_network_holder" name="social_networks" type="text">

Amar Singh · Accepted Answer · 2016-01-12 07:13:55Z

0

Check out my DEMO .

Just check if you require this

$(document).on('click','.social_selector',function(){

        if($(this).attr('data-active') == 1){
            $(this).addClass('btn-disabled');
            $(this).attr('data-active', 0);
        }else{
            $(this).removeClass('btn-disabled');
            $(this).attr('data-active', 1);
        }

        var networks = "";
        $(".social_selector").each(function(index, element){
            if($(element).attr('data-active') == 1){
                networks += $(element ).attr('data-network')+', ';
            }
        });
        $('#social_network_holder').val(networks);
alert(networks)
    });

answered Jan 12, 2016 at 7:13

Amar Singh

5,6223 gold badges30 silver badges56 bronze badges

2 Comments

Wesley Smith Over a year ago

You should mention what you changed so the OP understands what was wrong ;)

Amar Singh Over a year ago

@DelightedD0D Yeah I was just in hurry ,,, even then you posted earlier than me mate :D

Collectives™ on Stack Overflow

jQuery Loop not switching attributes

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related