button - 使用 Jquery 切换按钮

Question

我需要帮助。我有这个结构

<div class="buttons">
<p onclick="function1('param1')">button1</p>
<p onclick="function2('param2')">button2</p>
<p onclick="function3('param3')">button3</p>
</div>

这段代码可以完美运行，但另外我需要将 class="active" 添加到当前选择的按钮，这是我做不到的。以下代码不起作用。

$(document).ready(function() {
$('.buttons').click(function(){
if($(this).hasClass('active')){
return false;
}
else{
$('.buttons > p').removeClass('active');
$(this).addClass('active');
}
});
})

谁能说如何解决这个问题？

Answer 1

你有一个错字

<div class="buutons"> 

它应该是

<div class="buttons">

还

<p onclick="function3('param3')>button3</p>

应该

<p onclick="function3('param3')">button3</p>

JSFiddle 在这里。

Answer 2

删除 p 元素上的 onclick 属性，它将覆盖您在 js 代码中注册的侦听器，而是在 js 代码中注册它。

更改您的代码，在您的第一个选择器中添加“> p”：

$(document).ready(function() {
$('.buttons > p').click(function(){
if($(this).hasClass('active')){
return false;
}
else{
$('.buttons > p').removeClass('active');
$(this).addClass('active');
}
});
})