单击

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和：重点看看是否会有所帮助，但事实并非如此。在JQuery中，我也试图将跨度文本从“SELECT”更改为“SELECTED”，任何人都知道这部分代码有什么问题吗？

Answer 1

您的代码存在一些问题：

您的html <h3>未关闭

<h3>Testing</h3>

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

中的文本

这将修改内部的范围：

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

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

$(this) // ...

使用固定代码：https://jsfiddle.net/fyha5m9g/

Answer 2

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

最好的方法是替换span中的文本：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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