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

I want to change the background color of the button based upon the class. Why it is not going back after second click?

我想根据类改变按钮的背景颜色。为什么它不会在第二次点击后返回？

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/

5 个解决方案

#1

You can simplify your code greatly. Apply the default styling from the beginning and you don't need an .unpressed class.

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

The issue with using .attr( 'class' ) is that it will retrieve all the classes applied to the element as a string. Performing a check like if ( 'a' === $el.attr( 'class' ) ) won't work where $el is <li class="a b c"> as $el.attr( 'class' ) would return 'a b c' and not 'a'. Which is why your check was failing after the first click. This kind of check would be good for .hasClass().

使用.attr（'class'）的问题是它将检索作为字符串应用于元素的所有类。执行支票，如if（'a'=== $ el.attr（'class'））将无法在$ el

的情况下工作，因为$ el.attr（'class'）将返回'abc'而不是'a'。这就是为什么您的支票在第一次点击后失败的原因。这种检查对.hasClass（）有好处。

的情况下工作，因为$ el.attr（'class'）将返回'abc'而不是'a'。这就是为什么你的支票在第一次点击后失败的原因。这种检查对.hasClass（）有好处。

e.prevendDefault() is not required for an <li>, so remove that.

不需要e.prevendDefault（），因此请删除它。

Note: the selector I used for jQuery is pretty generic. You may need to increase it's specificity if there are other <li> on the page that don't require the functionality. Something along the lines of adding a class to the <ul> and using that as the part of the jQuery selector. i.e. <ul class="clicky-mcclickens"> and $( '.clicky-mcclickens li' ).

注意：我用于jQuery的选择器非常通用。如果页面上有其他不需要该功能的

，您可能需要增加它的特异性。将类添加到

，你可能需要增加它的特异性。将类添加到并将其用作jQuery选择器的一部分。即和$（'。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>

Sometimes you need more control than simply adding/removing a class when an element is clicked. In those instances you can use .hasClass() to check if the element has the class in question and apply the appropriate action.

有时，您需要更多的控制，而不是在单击元素时简单地添加/删除类。在这些情况下，您可以使用.hasClass（）来检查元素是否具有相关类，并应用适当的操作。

#2

Your code is much more complex than it needs to be; you can just call toggleClass() like this:

您的代码比它需要的复杂得多;你可以像这样调用toggleClass（）：

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

Updated fiddle

更新小提琴

Note that e.preventDefault() is redundant for an li element as it has no default behaviour to prevent.

请注意，e.preventDefault（）对于li元素是多余的，因为它没有要防止的默认行为。

#3

I would use toggleClass instead of adding and removing manually. This seems to work:

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

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

#4

Instead of check the complete string of the class of the element you can check if the element has specific class using hasClass:

您可以使用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>

The problem with using the attr('class') is that you can't know what exactly will be the final string.

使用attr（'class'）的问题在于你无法知道最终字符串究竟是什么。

#5

Just replace your js with:

只需用以下内容替换你的js：

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

#1