单击按钮

Question

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

这是我的按钮代码 -

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

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

的元素

如果您想选择一个课程，请选择此课程。

$(".mylink")

CSS选择器：w3schools

Answer 2

首先，mylink是代码中的类。

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

但是在jQuery中你使用的是 ID （$("#mylink")）。此外，<a>是<button>的上升者。因此，请将$("#mylink")的每一位更正为：

$(".mylink button")

通过这种方式，您将使用类<button>定位<a>标记内的.mylink标记。

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

Answer 3

使用$('#someID')，您正在根据它的ID选择内容。但是你使用了类（＆＃34; myLink＆＃34;），所以你应该使用$(".myLink").

尽管你使它变得比它需要的更复杂。也许你想尝试用css来做。

以下示例与您的问题非常相似： Pressed <button> CSS

Answer 4

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

1. 这是jQuery，而不是JavaScript（它有点不同）
2. 您正在更改<a>课程＆＃34; myLink＆＃34;不是<button>类
3. 您指的是一个类（".myClassName"）作为id（"#myIdName"）
4. 其他事情（即javascript如何处理DOM元素）......你应该多读一读。

无论如何，我已经让你工作了fiddle。