更改当前按钮元素的类

Question

我的Html

<div onclick="change()" class="button">ELEMENT 1</div>
<div onclick="change()" class="button">ELEMENT 2</div>
<div onclick="change()" class="button">ELEMENT 3</div>

我的Css

.button {
background-color: #fff;
color:#000;
}

.buttonactive {
background-color: #000;
color:#fff;
}

我的jQuery

function change() {
      $(this).addClass("buttonactive");
}

我想把当前按钮更改为类按钮.

Answer 1

将按钮更改为(删除内联事件处理程序)：

<div class="button">ELEMENT 2</div>

和jQuery：

$('div.button').click(function(){
    $(this).addClass("buttonactive");
})

jsFiddle实例

Answer 2

您也可以使用jQuery，将单击事件绑定到按钮，并将buttonactive类添加到单击按钮中。从所有div中删除onchange调用。

$(function(){
  $('.button').click(function(){
    //remove class from previously active button
    $('.buttonactive').removeClass('buttonactive');
    $(this).addClass('buttonactive');
  });
});

演示

Answer 3

尝试使用内联提交器将this作为参数传递，

HTML

<div onclick="change(this)" class="button">ELEMENT 1</div>
<div onclick="change(this)" class="button">ELEMENT 2</div>
<div onclick="change(this)" class="button">ELEMENT 3</div>

JS

function change(_this) {
   $(_this).addClass("buttonactive");
}

演示