& lt; li>不同背景颜色之间的元素切换

<li> element toggle between different background colors

本文关键字：之间 颜色 元素 lt li 背景      更新时间：2023-09-26

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

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/

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

使用.attr( 'class' )的问题是，它将检索应用于元素的所有类作为字符串。执行像if ( 'a' === $el.attr( 'class' ) )这样的检查将不起作用，$el是<li class="a b c">，因为$el.attr( 'class' )会返回'a b 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()来检查元素是否具有有问题的类，并应用适当的操作。

你的代码比它需要的复杂得多;你可以像这样调用toggleClass():

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

更新小提琴

注意e.preventDefault()对于li元素是冗余的，因为它没有默认行为来阻止。

我会使用toggleClass而不是手动添加和删除。这似乎可以工作:

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

代替检查元素的类的完整字符串，您可以使用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')的问题是你不能确切地知道最后的字符串是什么

将js替换为:

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

相关文章：