2015-01-21 4 views
2

Я использую кнопку, чтобы изменить цвет другой кнопки, когда пользователь нажимает на нее. Но по неизвестным причинам это не работает. Пожалуйста, помогите мне здесь.Toggle Class not Working

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Gallery</title> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/custom.css" rel="stylesheet"> 
</head> 
<body> 
    <div class="container"> 
     <p id="btn1" class="btn btn-primary">Click me!</p> 
     <p id="btn2" class="btn btn-default">Change color!</p> 
    </div> 

    <!-- Javascript --> 
    <script src="js/jquery-2.1.3.js"></script> 
    <script src="js/bootstrap.min.js"></script> 

    <script> 
     var main = function() { 
      $("#btn2".click(function() { 
       $("#btn1").toggleClass(".btn-primary"); 
      }); 
     } 

     $(document).ready(main); 
    </script> 
</body> 
</html> 
+1

проверить вашу консоль – Seth

+0

заменить основную-функцию с этим:.. Уагом главной = функция() { $ ("# btn2") нажмите (функция() { $ ("# btn1") toggleClass (функция() { return "btn-primary"; }); }); } Вы можете передать функцию методу toggleClass. – Blauharley

ответ

3

не ставьте "." перед именем класса (как вы могли бы сделать в селекторе):

$("#btn1").toggleClass("btn-primary"); 
+0

Он все еще не работает. Я изменил его на: $ ("# btn1"). ToggleClass ('btn-primary'); – Cartoon

1

Это:

$("#btn2".click(function() { 

Должно быть:

$("#btn2").click(function() { 

Обратите внимание на закрывающая скобка после ваших «# btn2 ".

Как указывалось другими, вам также необходимо удалить период с начала переводимого имени класса. Вам нужно проверить свою консоль на наличие ошибок.

+0

есть еще "." в классе pram –

+0

Oh! Дурак я. Спасибо. :) Ты спасатель жизни. – Cartoon

1

Должно быть так.

$("#btn2").click(function() { 
    $("#btn1").toggleClass("btn-primary"); 
}); 
+0

Значит, разница в вашем коде удаляет период до btn-primary? – Dijkgraaf

+0

Да и отсутствует ")" в селекторе –