toggleClass не работает над другим элементом

Question

Я пробую этот сценарий, но его не работает. Я хочу переключить класс на элемент при щелчке по другому элементу.

Ниже мой HTML/CSS/JQuery

HTML

<div class="box1"></div> 
<div class="box2"></div> 

CSS

.box1 { 
    height: 100px; 
    width: 100px; 
    background: red; 
} 

.blue{ 
    background: blue; 
} 
.box2{ 
    height: 100px; 
    width: 100px; 
    background: yellow; 
} 

JQuery

$('.box1').click(function(){ 
$('.box2').toggleClass('blue'); 
}); 

liveweave можно посмотреть здесь. Я уже искал в Интернете, и я думаю, что нет никакой ошибки в своем коде, но все же я не понимаю, почему он не работает

http://liveweave.com/zIfs3U

кто-то руководство пожалуйста

Answer 1

С .box2 и .blue классы имеют одинаковый приоритет (они оба имени класса), вы должны поставить blue после .box2 для того, чтобы быть выше и применяться:

.box2 { 
    height: 100px; 
    width: 100px; 
    background: yellow; 
} 
.blue { 
    background: blue; 
} 

Итак, суммируя: если селектора CSS имеют одинаковый вес (как в случае выше), применяется последний определенный.

Другой вариант заключается в написании правила CSS, как это (предпочтительный):

.box2 { 
    height: 100px; 
    width: 100px; 
    background: yellow; 
} 
.box2.blue { 
    background: blue; 
} 

Читайте о "CSS Specificity: Things You Should Know" важную информацию, чтобы знать.

Answer 2

Дайте это попробовать.

JQuery

$('.box1').click(function (e) { 
    $('.box2').toggleClass('blue'); 
}); 

CSS

.box1 { 
    height: 100px; 
    width: 100px; 
    background-color: red; 
} 
.box2 { 
    height: 100px; 
    width: 100px; 
    background-color: yellow; 
} 
.blue { 
    background-color: blue; 
} 

jsFiddle

Answer 3

Попробуйте

$('.box1').on('click', function(){ 
    $('.box2').toggleClass('blue'); 
});