Не меняя цвет при нажатии кнопки

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

Выбирает элемент с 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') вы выбираете что-то по его идентификатор. Но вы используете классы («myLink»), поэтому вы должны использовать $(".myLink").

И, несмотря на это, вы делаете это более сложным, чем это должно быть. Возможно, вы захотите сделать это только с помощью css.

Вот пример, который очень похож на ваш вопрос: Pressed <button> CSS

Answer 4

Есть некоторые ошибки в коде:

1. Это JQuery, а не JavaScript (это немного по-другому)
2. Вы меняете <a> класса «MyLink» НЕ <button> класса
3. Вы обращаетесь к классу (".myClassName") в качестве идентификатора ("#myIdName")
4. Другие предметы (т. как javascript обрабатывает элемент DOM) ... вы должны прочитать и изучить немного больше.

В любом случае, я сделал вам работу fiddle.