CODEWITHSUNDEEP
javascriptjquery
Liondancer
Liondancer

Reputation: 16469

removing and adding classes in button set

I have this set of buttons:

<div class="test-button-set">
  <button id="hdfs_test" class="btn btn-default btn-lg">HDFS</button>
  <button id="hive_test" class="btn btn-default btn-lg">HIVE</button>
  <button id="hdfs_hive_test" class="btn btn-default btn-lg">BOTH</button>
</div>

What I want to do is, when I click on one of these buttons, add a class to the clicked button and remove the same class from all the other buttons. This is what I have so far but as I am new to JS/jQuery I am having a bit of trouble

var testButtonSet = document.getElementsByClassName("test-button-set")[0].getElementsByTagName("button");
testButtonSet.forEach($(this).click(function() {
    testButtonSet.removeClass("selected");
    this.addClass("selected");
}));

Upvotes: 1

Views: 100

Answers (5)

martuanez
martuanez

Reputation: 59

First things first, the foreach function receives a function as a first parameter so instead of using it like this:

testButtonSet.forEach($(this).click(function() {
    testButtonSet.removeClass("selected");
    this.addClass("selected");
}));

It should be used like this:

testButtonSet.forEach(function(element, index, array){
    $(element).click(function() {
        testButtonSet.removeClass("selected");
        this.addClass("selected");
    })
);

However the foreach method works with arrays and not dom elements. https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach

Fortunately we have a couple of things to work around this...

One is to "demethodize" it as shown here:

var each = Function.prototype.call.bind([].forEach);

http://colintoh.com/blog/5-array-methods-that-you-should-use-today#demethodizing

Another one is to use jquery "each" method i.e. 

$.each(array, function(){});

http://api.jquery.com/jquery.each/

$(elements).each(function(){});

http://api.jquery.com/each/

That being said, now you can choose between using jquery or the native demethodized version.

each(testButtonSet, function(element, index, array){
    $(element).click(function() {
        testButtonSet.removeClass("selected");
        this.addClass("selected");
    });
}); 

$(testButtonSet).each(function(index, element){
    $(element).click(function() {
        testButtonSet.removeClass("selected");
        this.addClass("selected");
    });
});

Fiddles: forEach: http://jsfiddle.net/ze6bkprg/ Jquery: http://jsfiddle.net/n8sn9y2k/

Upvotes: 1

haim770
haim770

Reputation: 49095

The pure jQuery way would be:

$('.test-button-set button').click(function() {
    var $this = $(this);
    $this.siblings().removeClass("selected");
    $this.addClass("selected");
});

Upvotes: 1

nice ass
nice ass

Reputation: 16719

$('button').on('click', function(){
  $(this).addClass('selected').siblings().removeClass('selected');
});

Upvotes: 1

Paul Roub
Paul Roub

Reputation: 36438

Close. You're trying to use jQuery methods on raw-DOM objects. Wrap them first:

testButtonSet.forEach($(this).click(function() {
    $(testButtonSet).removeClass("selected");
    $(this).addClass("selected");
}));

Or, to go full-jQuery:

var testButtons = $('.test-button-set button');

testButtons.click( function() {
  testButtons.removeClass('selected');
  $(this).addClass('selected'); 
});

Example:

var testButtons = $('.test-button-set button');

testButtons.click(function() {
  testButtons.removeClass('selected');
  $(this).addClass('selected');
});
.selected {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test-button-set">
  <button id="hdfs_test" class="btn btn-default btn-lg">HDFS</button>
  <button id="hive_test" class="btn btn-default btn-lg">HIVE</button>
  <button id="hdfs_hive_test" class="btn btn-default btn-lg">BOTH</button>
</div>

Upvotes: 2

antyrat
antyrat

Reputation: 27765

Your code can be:

$( '.test-button-set button' ).click(function() {
    $( '.test-button-set button' ).removeClass("selected");
    $( this ).addClass("selected");
});

Upvotes: 1

Related Questions