单击按钮时不改变颜色答案

【问题标题】：not changing color when clicking button单击按钮时不改变颜色
【发布时间】：2015-07-22 07:32:57
【问题描述】：

我正在使用引导程序在单击时更改按钮颜色，但我认为我做错了，当我单击按钮时按钮没有改变它的颜色。

这是我的按钮代码 -

<td>
     <a class="mylink" href="#"><button class="btn btn-default btn-xs">{% trans %}Allow{% endtrans %}</button></a>
</td>

这是我的 javascript 代码 ---

<script type="text/javascript">
        $(document).ready(function() {
        if (localStorage.getItem('isCliked'){
        $("#mylink").addClass('btn-success');
                $("#mylink").removeClass('btn-default');
        }
        $('#mylink').on('click', function() {
        $(this).addClass('btn-success');
                $(this).removeClass('btn-default');
                // set the value upon clicking
                localStorage.setItem('isCliked', true)
        });

单击时我需要更改按钮颜色，当再次调用页面时，它应该检查它是否被激活。

谁能帮我解决这个问题。

【问题讨论】：

Button 在a 标签下？？为什么？？
@TusharGupta 为什么不呢？
@Haketo：因为规范是这么说的。
@Abhitalks 很好，我在 spec 中没有看到，看看“短语内容”是什么意思
@Haketo: The interactive element button must not appear as a descendant of the a element 和 Content model: Transparent, but there must be no interactive content descendant.

标签： javascript css twitter-bootstrap button

【解决方案1】：

问题可能就在这里。

$("#mylink")

这会选择带有id="mylink" 的元素，而不是带有class="mylink" 的元素

如果你想选择一门课，那就去吧。

$(".mylink")

CSS 选择器：w3schools

【讨论】：

【解决方案2】：

首先，mylink 是您代码中的一个类。

<a href="#" class="mylink">

但在 jQuery 中，您使用的是 ID ($("#mylink"))。此外，<a> 是<button> 的升序。因此，将您的每一点$("#mylink") 纠正为：

$(".mylink button")

这样，您将在 <a> 标记内定位 <button> 标记，类为 .mylink。

参考：http://www.w3schools.com/jquery/jquery_ref_selectors.asp

【讨论】：

【解决方案3】：

使用$('#someID')，您可以通过它的 id 选择一些东西。但是你使用类（“myLink”）所以你应该使用$(".myLink").

尽管如此，你还是让它变得比它需要的更复杂。也许你想尝试只用 css 来做。

这是一个与您的问题非常相似的示例： Pressed <button> CSS

【讨论】：

【解决方案4】：

您的代码中有一些错误：

它是 jQuery，而不是 JavaScript（有点不同）
您正在更改<a> 类“myLink”而不是<button> 类
您将类 (".myClassName") 称为 id ("#myIdName")
其他内容（即 javascript 如何处理 DOM 元素）...您应该多阅读和学习。

不管怎样，我已经让你成为一个工作的fiddle。

【讨论】：