单击按钮时颜色不变

Question

我正在使用 bootstrap 在单击时更改按钮颜色，但我认为我做错了什么，当我单击按钮时按钮没有更改它的颜色。

这是我的按钮代码 -

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

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

谁能帮我解决这个问题。

Answer 1

可能是这里的问题。

$("#mylink")

这 select 是带有 id="mylink" 的元素，而不是带有 class="mylink"

的元素

如果你想select一个class，那就去做吧。

$(".mylink")

CSS 选择器：w3schools

Answer 2

首先，mylink 是您代码中的 class。

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

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

$(".mylink button")

这样，您将使用 class .mylink.

定位 <a> 标签内的 <button> 标签

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

Answer 3

在 $('#someID') 中，您可以通过 ID 选择内容。但是你使用类 ("myLink") 所以你应该使用 $(".myLink").

尽管如此，你还是让它变得比它需要的更复杂。也许您想尝试仅使用 css.

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

Answer 4

您的代码中存在一些错误：

是jQuery，不是JavaScript（有点不一样）
您正在更改 <a> class "myLink" 而不是 <button> class
您指的是 class (".myClassName") 作为 id ("#myIdName")
其他事情（即 javascript 如何处理 DOM 元素）...您应该多阅读和研究一点。

不管怎样，我已经让你工作了fiddle。

单击按钮时颜色不变

not changing color when clicking button

javascript

css

button

twitter-bootstrap