在按钮集中删除和添加类

Question

我有这组按钮：

<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>

我想要做的是，当我点击其中一个按钮时，向点击的按钮添加一个 class 并从所有其他按钮中删除相同的 class。这是我目前所拥有的，但由于我是 JS/jQuery 的新手，我遇到了一些麻烦

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

Answer 1

您的代码可以是：

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

Answer 2

关闭。您正在尝试对原始 DOM 对象使用 jQuery 方法。先把它们包起来：

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

或者，要完整-jQuery:

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

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

示例：

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>

Answer 3

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

Answer 4

纯粹的 jQuery 方法是：

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

Answer 5

首先，foreach 函数接收一个函数作为第一个参数，所以不要像这样使用它：

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

应该这样使用：

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

但是 foreach 方法适用于数组而不适用于 dom 元素。 https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach

幸运的是，我们有一些方法可以解决这个问题...

一个是 "demethodize" 如下所示：

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

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

另一种是使用 jquery "each" 方法即

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

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

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

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

话虽这么说，现在您可以选择使用 jquery 或本机去方法化版本。

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");
    });
});

小提琴：对于每个：http://jsfiddle.net/ze6bkprg/ Jquery: http://jsfiddle.net/n8sn9y2k/

在按钮集中删除和添加类

removing and adding classes in button set

javascript

jquery