Javascript 即使单击后也要更改按钮颜色

我正在尝试在单击按钮后更改按钮的颜色。我在这里看了一些例子，最后我得到了一个颜色，一旦单击，但是当我单击其他地方（按钮的任何地方）时，css类就消失了。这些按钮位于表单内部，因此我希望它们在表单提交之前都具有活动状态css

以下是我到目前为止的情况：

jQuery（'.choose school'）。单击（函数（）{
jQuery（this.toggleClass（'active'）；
if（jQuery（this）.hasClass（'active'））{
jQuery（this）.text（'SELECTED'）；
}否则{
jQuery（this）.text（'SELECT'）；
}
});
.choose-school.active{
背景色：#eeffd4；
}
.选择学校：活动{
背景色：#eeffd4；
}
.选择学校：聚焦{
背景色：#eeffd4；
}

测试
挑选
您的代码存在一些问题：

您的html
未关闭
（语义）您可以使用
$
for代替
jQuery
修改固定代码：
您的代码存在一些问题：

您的html
未关闭
（语义）您可以使用
$
for代替
jQuery
处理固定代码：
您需要使用
$.html（）
而不是
$.text（）
。文本替换程序将删除所有标记并仅保留文本

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


jQuery（'.choose school'）。单击（函数（）{
jQuery（this.toggleClass（'active'）；
if（jQuery（this）.hasClass（'active'））{
jQuery（this）.html（jQuery（this）.html（）.replace（'SELECT'，'SELECTED'））；
}否则{
jQuery（this）.html（jQuery（this）.html（）.replace（'SELECTED'，'SELECT'））；
}
});
.choose-school.active{
背景色：#eeffd4；
}
.选择学校：活动{
背景色：#eeffd4；
}
.选择学校：聚焦{
背景色：#eeffd4；
}

测试
挑选
您需要使用
$.html（）
而不是
$.text（）
。文本替换程序将删除所有标记并仅保留文本

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


jQuery（'.choose school'）。单击（函数（）{
jQuery（this.toggleClass（'active'）；
if（jQuery（this）.hasClass（'active'））{
jQuery（this）.html（jQuery（this）.html（）.replace（'SELECT'，'SELECTED'））；
}否则{
jQuery（this）.html（jQuery（this）.html（）.replace（'SELECTED'，'SELECT'））；
}
});
.choose-school.active{
背景色：#eeffd4；
}
.选择学校：活动{
背景色：#eeffd4；
}
.选择学校：聚焦{
背景色：#eeffd4；
}

测试
挑选
您应该在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文件中创建新类，并在单击按钮时应用它。不要使用“聚焦”按钮，它在那里没有用。这样做：

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

你的代码对我几乎起作用了。检查这把小提琴：我只将eventhandler更改为“开”事件代码对我有效chrome 47中的find for me也很好您缺少一个结束标记…@Julo0sS完美！好的，问题是现在它改变了整个按钮，说选择！我希望它只是将“Select”改为“Selected”，所以基本上只针对span或span类，您的代码几乎对我有用。检查这把小提琴：我只将eventhandler更改为“开”事件代码对我有效chrome 47中的find for me也很好您缺少一个结束标记…@Julo0sS完美！好的，问题是现在它改变了整个按钮，说选择！我希望它只是将“Select”改为“Selected”，这样基本上只针对span或span类，而不在任何地方使用$（this）。在变量中保存一次：）是的，我通常这样做，只是不想在这里对答案太挑剔。。。heheDon不要到处使用美元。在变量中保存一次：）是的，我通常这样做，只是不想在这里对答案太挑剔。。。呵呵
$(this) // ...

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

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