Question

我有25个这样的按钮：

<button class="Bouton_Clavier" onclick="Click_Bouton('Bouton-Name')"> 
  Bouton-Name</button>

我想在点击时更改按钮样式（仅限点击按钮）。

所以，功能是：

function Click_Bouton(Nom) 
{
  $(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
}

但它不起作用。

如果我用以下方法更改功能：

function Click_Bouton(Nom) 
{
  $('button').click(function(){ $('button').removeClass('Bouton_Clavier')
    .addClass('Bouton_Clavier_Select'); 
  });
}

所有按钮样式都会更改，并且在点击两次后才能正常工作。

但我只需要更改点击按钮的样式。

Answer 1

手动将上下文设置为Paul Draper did in his answer或（更好）不要使用内联事件处理程序：

$(".Bouton_Clavier").click(function () {
  $(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
});

Answer 2

这是因为this未设置为您认为应该是的。

<button class="Bouton_Clavier" onclick="Click_Bouton.call(this, 'Bouton-Name')"> Bouton-Name </button>

此外，我觉得有义务建议不要使用onclick=，而是使用$.click。

哦，你似乎没有对你的论点Dom做任何事情。

Answer 3

点击事件后点击按钮css，

$(".Bouton_Clavier").click(function(){
    $(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
});

在代码的最后一部分，您提到指向文档中所有按钮的 $（'button'）。这就是为什么所有按钮样式都会在按钮点击时更改的原因。

Demo

在使用JQuery onclick中

3 个答案: