0

我在这里忽略了一些非常基本的东西。每当单击复选框时，我都想为组中的特定元素着色。所以我需要使这些元素可观察。

这就是我的 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() );

 });
4

3 回答 3

1

您正在传递一个函数而不是使用匿名函数，因此请删除()

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

否则，这将在页面加载时立即执行。另外，取消引用this：

$(this).closest('i').css('color','green');
于 2013-11-11T17:20:28.967 回答
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>and<input>对象。您可以使用其中一个.children()或.find()找到它们。
  5. 您的初始调用handleCheckbox()不起作用，因为它仅在this设置为<label>对象时才起作用（它在事件处理程序中的工作方式）。因此，要使用与事件处理程序相同的函数进行初始化，您需要遍历所有标签并确保this为该函数进行了适当的设置。一种简单的方法是使用.each()我在代码建议中显示的方法。
于 2013-11-11T17:24:36.923 回答
0

在这里摆弄你可能想要的东西：

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

 });
于 2013-11-11T17:27:42.610 回答