Почему jquery ведет себя так:

Question

$('.box').click(function(){ 
    $(this).find('p').toggle(
     function() { 
      $(this).css({"color" : "red"}); 
     }, 
     function() { 
      $(this).css({"color" : "black"}); 
     } 
    ); 
}); 

Если я выполню этот скрипт, цвет «p» изменится, если я нажму «p», а не на класс .box почему? И как я могу сделать это так, что «р» меняет цвет, когда я нажимаю на .box DIV

Answer 1

.toggle() присваивает обработчики событий в click случае, что вы хотите, это:

$('.box').toggle(function(){ 
    $('p', this).css({"color" : "red"}); 
}, function() { 
    $('p', this).css({"color" : "black"}); 
}); 

Каждый раз, когда вы оберните новую функцию, this относится к элементу, с которым вы имеете дело (по крайней мере, для этот пример, see more about how closures work here), поэтому сначала это селектор .box, то каждый из них p внутри, вы хотите назначить переключатель щелчка на .box, чтобы переключить цвет p, поэтому вы используете a .toggle() на .box напрямую.

Answer 2

Другим вариантом было бы просто назначить цвета в классах и использовать .toggleClass().

Сначала введите p элементов класса black, затем переключите класс red.

CSS

.black { color: black; } 
    .red { color: red; } 

JQuery

$('.box').click(function(){ 
     $(this).find('p').toggleClass('red'); 
});