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>

我想要做的是，当我点击其中一个按钮时，在单击的按钮上添加一个类，并从所有其他按钮中删除相同的类。这是我到目前为止，但由于我是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

关闭。您正在尝试在raw-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 2

您的代码可以是：

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

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

幸运的是，我们有几件事可以解决这个问题......

一个是＆＃34; demethodize＆＃34;它如下所示：

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

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

另一个是使用jquery＆＃34;每个＆＃34;方法，即

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

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

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

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

话虽如此，现在您可以选择使用jquery还是本机的demethodized版本。

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

小提琴： forEach：http://jsfiddle.net/ze6bkprg/ Jquery：http://jsfiddle.net/n8sn9y2k/

删除和添加按钮集中的类

5 个答案: