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');
});

Updated fiddle

请注意，e.preventDefault()元素的li是多余的，因为它没有要阻止的默认行为。

Answer 2

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

使用.attr( 'class' )的问题在于它将检索作为字符串应用于元素的所有类。执行if ( 'a' === $el.attr( 'class' ) )之类的检查在$el为<li class="a b c">时无效，因为$el.attr( 'class' )将返回'a b c'而非'a'。这就是为什么您的支票在第一次点击后失败的原因。这种检查对.hasClass()有好处。

e.prevendDefault()不需要

<li>，因此请将其删除。

注意：我用于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：

    <section style="height:100%;">
        <div class="map" id="map" style="height:100%;">
        </div>
    </section>

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

5 个答案: