javascript - 如果选中此复选框，则对其邻居执行此操作

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/还要注意，初始颜色也是根据初始复选框状态设置的。

您的代码存在以下问题:

1. .closest()一直到祖先。它找不到邻居。
2. 传递回调函数时，不要使用 ()最后，因为这会导致它立即执行并传递执行函数的返回值。您只想传递对函数的引用，该函数是在没有括号的情况下完成的。
3. 你没有引用this 。将其视为 JavaScript 变量，而不是字符串。
4. this指针将指向回调中的标签对象，因此您需要查看子元素以找到 <i>和<input>对象。您可以使用 .children()或.find()找到他们。
5. 您首次调用handleCheckbox()不起作用，因为它仅在 this 时才起作用设置为<label>对象(它在事件处理程序中的工作方式)。因此，要使用与事件处理程序相同的函数进行初始化，您需要迭代所有标签并确保 this为该功能适当设置。一个简单的方法是使用 .each()正如我在代码建议中所示的那样。