Если этот флажок установлен, тогда сделайте это со своими соседями

Question

Я пропустил что-то довольно фундаментальное здесь. Я хочу пометить конкретный элемент в группе всякий раз, когда нажимается флажок. Поэтому мне нужно сделать эти элементы наблюдаемыми.

Это то, что мой HTML выглядит

<p> 
    <label> 
     <i>bla2</i> 
     <input type="checkbox" /> 
    </label> 
</p> 

<p> 
    <label> 
     <i>bla3</i> 
     <input type="checkbox" /> 
    </label> 
</p> 

Мой JS выглядит следующим образом

$(document).ready(function() { 

    function handleCheckbox() { 

     if ($(this).closest(':checkbox').is(':checked')) { 
      $('this').closest('i').css('color','green'); 
     } else { 
      $('this').closest('i').css('color','red'); 
     } 
    } 

    handleCheckbox(); 
    $('label').on('click', handleCheckbox()); 

}); 

Answer 1

.closest() смотрит на текущий элемент, а затем вверх по иерархии на предков, а не у соседей. В вашем случае, this укажет на объект метки, чтобы вы могли посмотреть на детей, чтобы найти тег <i> и тег <input>. У вас также есть несколько других ошибок кодирования.

Кроме того, ваша handleCheckbox() функция должна значение this набора к <label> объекта для того, чтобы работать должным образом, так что вы не можете просто назвать его прямым и ожидать, что она, чтобы установить все цвета соответствующим образом. Вместо этого вам придется перебирать все метки на странице и вызывать handleCheckbox() для каждого из них. Я сделал это в коде ниже с .each().

Вот способ исправить:

$(document).ready(function() { 
    function handleCheckbox() { 
     // the this pointer here will point to the label object so you need 
     // can use .find() to find children of the label object 
     var newColor; 
     if ($(this).find("input").is(":checked")) { 
      newColor = "green"; 
     } else { 
      newColor = "red"; 
     } 
     $(this).find("i").css("color", newColor); 
    } 
    // hook up click handler and initialize the color for all labels 
    $('label').on('click', handleCheckbox).each(handleCheckbox);   

}); 

Смотрите работаем демо: http://jsfiddle.net/jfriend00/tRQ99/, а также заметить, что первоначальный цвет устанавливаются на основе исходного состояния CheckBox тоже.

Ваш код имел эти вопросы:

1. .closest() доходит до предков. Он не находит соседей.
2. При передаче функции обратного вызова в конце вы не используете (), потому что это заставляет его немедленно выполнить и передать возвращаемое значение для выполнения функции. Вы просто хотите передать ссылку на функцию, которая выполняется без парнеров.
3. Вы не указали this. Рассматривайте его как переменную javascript, а не строку.
4. Указатель this указывает на объект метки в вашем обратном вызове, поэтому вам нужно посмотреть дочерние элементы, чтобы найти объекты <i> и <input>. Вы можете использовать либо .children(), либо .find(), чтобы найти их.
5. Вы начальный вызов handleCheckbox() не работал, потому что он работает только тогда, когда this установлен в объект <label> (как он работает в обработчике событий). Таким образом, чтобы использовать ту же функцию для инициализации, что и обработчик события, вам нужно выполнить итерацию по всем меткам и убедиться, что this установлен для этой функции соответствующим образом. Простой способ сделать это с .each(), как я показал в своем предложении кода.

Answer 2

вы передаете функцию, а не используя анонимную функцию, поэтому удалить ()

$('label').on('click', handleCheckbox); 

Иначе это выполнит сразу же при загрузке страницы. Кроме того, конец цитаты this:

$(this).closest('i').css('color','green'); 

Answer 3

Fiddle за то, что вы, вероятно, хотите здесь:

http://jsfiddle.net/93CeR/2

$(document).ready(function() { 

    function handleCheckbox() { 

     if ($(this).find(':checkbox').is(':checked')) { // Use .find instead of closest because the element you want is a child 
      $(this).find('i').css('color','green'); // Remove qoutes from this and use .find for same reason as above 
     } else { 
      $(this).find('i').css('color','red'); // Ditto 
     } 
    } 

    $('label').each(function(){ 
     handleCheckbox.apply(this); // We need to call the function initially using 'label' for this. 
    }); 
    $('label').on('click', handleCheckbox); // You want a reference to handleCheckbox not to invoke it so remove the parenthesis 

});