点击后更改按钮颜色

Question

单击按钮后，我正在尝试更改按钮的颜色。我在这里查看示例，我终于在单击后更改了颜色，但是当我单击其他位置（按钮外的任何位置）时，该 css 类就消失了。这些按钮位于表单内部，因此我希望它们在表单提交之前保持活动状态 css。

这是我目前所拥有的：

jQuery('.choose-school').click(function() {
  jQuery(this).toggleClass('active');
  if (jQuery(this).hasClass('active')) {
    jQuery(this).text('SELECTED');
  } else {
    jQuery(this).text('SELECT');
  }
});

.choose-school.active {
  background-color: #eeffd4;
}
.choose-school:active {
  background-color: #eeffd4;
}
.choose-school:focus {
  background-color: #eeffd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button type="button" class="choose-school">
  <h3>Testing
    <span class="select-active">SELECT</span>
</button>

我尝试使用 :active 和 :focus 之类的东西来查看是否有帮助，但没有。在 JQuery 中，我还尝试将跨度文本更改从“SELECT”更改为“SELECTED”有人知道这部分代码有什么问题吗？

Answer 1

您需要使用$.html() 而不是$.text()。文本替换器将删除所有标签并仅保留文本。

简单的方法是将 HTML 作为字符串获取，替换它，然后设置它。请参见下面的示例：

jQuery('.choose-school').click(function() {
  jQuery(this).toggleClass('active');
  if (jQuery(this).hasClass('active')) {
    jQuery(this).html(jQuery(this).html().replace('SELECT', 'SELECTED'));
  } else {
    jQuery(this).html(jQuery(this).html().replace('SELECTED', 'SELECT'));
  }
});

.choose-school.active {
  background-color: #eeffd4;
}
.choose-school:active {
  background-color: #eeffd4;
}
.choose-school:focus {
  background-color: #eeffd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button type="button" class="choose-school">
  <h3>Testing
    <span class="select-active">SELECT</span>
  </h3>
</button>

最好的办法是替换span里面的文字：

jQuery('.choose-school').click(function() {
  jQuery(this).toggleClass('active');
  if (jQuery(this).hasClass('active')) {
    jQuery(this).find('.select-active').html('SELECTED');
  } else {
    jQuery(this).find('.select-active').html('SELECT');
  }
});

.choose-school.active {
  background-color: #eeffd4;
}
.choose-school:active {
  background-color: #eeffd4;
}
.choose-school:focus {
  background-color: #eeffd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button type="button" class="choose-school">
  <h3>Testing
    <span class="select-active">SELECT</span>
  </h3>
</button>

Answer 2

您的代码存在一些问题：

您的 html <h3> 没有关闭

<h3>Testing</h3>

您尝试更改整个按钮的文本，而不仅仅是里面的文本

这会修改里面的span：

$(this).find('.select-active').text('SELECTED');

（语义）您可以使用$ 代替jQuery

$(this) // ...

修改固定代码：https://jsfiddle.net/fyha5m9g/

Answer 3

您应该在 css 文件中创建新类并在单击按钮时应用它。不要在按钮上使用焦点，它在那里没有用。这样做：

<script>
jQuery('.choose-school').click(function(){

        if(jQuery(this).hasClass('active')){
          jQuery(this).removeClass('active');
          jQuery(this).text('SELECTED');
        }else{
          jQuery(this).addClass('active');
          jQuery(this).text('SELECT');
        }
    });
</script>

CSS文件

.choose-school.active {
    background-color: #eeffd4; 
}