<li>元素在不同背景颜色之间切换

Question

我想根据类更改按钮的背景色。 为什么第二次单击后它不返回？

 var $begin1 = $(".begin1").click(function(e) { e.preventDefault(); var buttonState = $(this).attr("class"); if (buttonState != 'pressed') { $begin1.removeClass('pressed'); $(this).addClass('pressed'); } else { $(this).removeClass('pressed'); $(this).addClass('unpressed'); } }); 

 li { list-style-type: none; } .begin1.unpressed, .begin2.unpressed { background-color: white; color: black; border: 2px solid #4CAF50; margin: 0 0 10px 0; } li.begin1.pressed, li.begin2.pressed { background: #4CAF50; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <li class="begin1 unpressed"> <h2>Button</h2> </li> 

https://jsfiddle.net/nrebaL00/

Answer 1

您的代码比需要的复杂得多。 您可以像这样调用toggleClass() ：

var $begin1 = $(".begin1").click(function() {
    $(this).toggleClass('pressed unpressed');
});

更新的小提琴

请注意， e.preventDefault()对于li元素是多余的，因为它没有默认行为可以防止。

Answer 2

您可以大大简化您的代码。 从一开始就应用默认样式，则不需要.unpressed类。

使用.attr( 'class' )在于，它将以字符串的形式检索应用于该元素的所有类。 在$el是<li class="abc"> ，执行类似if ( 'a' === $el.attr( 'class' ) )将不起作用，因为$el.attr( 'class' )将返回'ab c'而不是'a' 。 这就是为什么第一次单击后检查失败的原因。 这种检查对.hasClass()会很有用。

<li>不需要e.prevendDefault() ，因此将其删除。

注意：我用于jQuery的选择器非常通用。 如果页面上还有其他不需要功能的<li> ，则可能需要提高其特异性。 将类添加到<ul>并将其用作jQuery选择器的一部分。 即<ul class="clicky-mcclickens">和$( '.clicky-mcclickens li' ) 。

 $('li').on('click', function(e) { $(this).toggleClass('pressed'); }); 

 li { list-style-type: none; background-color: white; color: black; border: 2px solid #4CAF50; margin: 0 0 10px 0; } .pressed { background: #4CAF50; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <h2>Button 1</h2> </li> <li> <h2>Button 2</h2> </li> </ul> 

有时您需要更多的控制权，而不仅仅是单击元素时添加/删除类。 在这些情况下，您可以使用.hasClass()来检查元素是否具有所讨论的类，并应用适当的操作。

Answer 3

我会使用toggleClass而不是手动添加和删除。 这似乎可行：

var $begin1 = $(".begin1").click( function(e) {
    $begin1.toggleClass('pressed');
});

Answer 4

您可以使用hasClass来检查元素是否具有特定类，而不是检查元素类的完整字符串：

 var $begin1 = $(".begin1").click( function(e) { e.preventDefault(); if(!$(this).hasClass('pressed')){ $begin1.removeClass('unpressed'); $(this).addClass('pressed'); } else{ $(this).removeClass('pressed'); $(this).addClass('unpressed'); } }); 

 li{ list-style-type: none; } .begin1.unpressed, .begin2.unpressed { background-color: white; color: black; border: 2px solid #4CAF50; margin: 0 0 10px 0; } li.begin1.pressed, li.begin2.pressed{ background: #4CAF50; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <li class="begin1 unpressed"><h2>Button</h2></li> 

使用attr('class')的问题在于您不知道最终的字符串到底是什么。

Answer 5

只需将您的js替换为：

 $(document).ready(function() { $(".begin1").click(function(){ $(this).toggleClass("pressed"); }); });