Javascript 以变量作为参数的函数find（）返回空对象

我正在重构生成的网页上的代码，其中有一个div选项卡，可以多次出现。在每个这样的div上都有一个带有复选框的小部分，可以让您选择将显示的其他div

因为有机会将其他div添加到页面中，所以我想将代码模块化。这意味着每个复选框id都与div的类相同，它应该切换该类，并在末尾添加div。所以我用了检查过的id，把它和。和Div并尝试在最近的字段集中找到它

这是一把几乎能起作用的小提琴：我找不到使onchange起作用的方法

代码如下：

$(document).ready(function(){
  $(".inChecks").each(function(){
      changeDivState($(this));
  });
});

function changeDivState(element){
  var divClassSel = "." + element.attr("id") + "Div";
  var cloField = element.closest("fieldset");
  if(element.prop("checked")){
      cloField.find(divClassSel).toggle(true);
  } else {
      cloField.find(divClassSel).toggle(false);
  }
}

除此之外，onchange不起作用，此功能实现了它的预期功能。然而，只有在jsfiddle上。相同的代码在我的页面上不起作用

当我使用代码中的登录变量时，结果如下

console.log(divClassSel)    => inRedDiv
console.log($(divClassSel)) => Object[div.etc.]
console.log(cloField)       => Object[fieldset.etc.]
//but
console.log(cloField.find(divClassSel)) => Object[]

根据firebug的说法，jQuery的版本是1.7.1

既然我找不到任何解决方案，有没有其他方法可以使它模块化？还是有什么我不知道的错误？我试图避免编写一个函数，该函数对元素id进行x检查，或者像以前那样为每个复选框编写唯一的函数。

删除内联onchange，也不需要对元素进行迭代

只需在inCheckes类上编写一个事件，并将当前元素引用传递给函数：

HTML: 小提琴：

---

正如gillesc在评论中所说的，将javascript代码更改为类似这样的代码使其工作起来

$(document).ready(function(){
    $(".inChecks").each(function(){
        changeDivState($(this));
    });

    $(".inChecks").on("change", function() {
        changeDivState($(this));
    });
});

function changeDivState(element){
    var divClassSel = "." + element.attr("id") + "Div";
    var cloField = element.closest("fieldset");
    if(element.prop("checked")){
        cloField.find(divClassSel).toggle(true);
    } else {
        cloField.find(divClassSel).toggle(false);
    }
}

---

您询问了另一种方法，如何以模块化的方式制作：

您可以创建一个jQuery插件，该插件处理一个字段集的逻辑，包括在单击不同复选框时更改颜色。 通过这种方式，所有逻辑都捆绑在插件中的一个位置，您可以在以后对其进行优化。 例如，您可以稍后决定插件应该创建字段集的整个html结构，比如jQuery UI slider插件创建slider元素的整个结构，并因此更改插件

jQuery插件的第一个版本的代码可能如下所示：

$.fn.colorField = function() {
    var $colorDiv = this.find('.colorDiv'),
        $inputs = this.find('input'),
        $checked = $inputs.filter(':checked');

    if($checked.length) {
        // set initial color
        $colorDiv.css('background', $checked.attr('data-color'));
    }

    $inputs.change(function() {
        var $this = $(this),
            background = '#999'; // the default color

        if($this.prop('checked')) {
            // uncheck the other checkboxes
            $inputs.not(this).prop('checked', false);
            // read the color for this checkbox
            background = $(this).attr('data-color');
        }
        // change the color of the colorDiv container
        $colorDiv.css('background', background);
    });
};

$(document).ready(function(){
    $('#field1').colorField();
    $('#field2').colorField();
});

该插件使用复选框的数据颜色属性来更改colorDiv容器的颜色。因此，每个复选框都需要一个数据颜色属性，但不再需要为不同的颜色设置多个div

一个字段集的HTML代码：

<fieldset id="field1">
    <legend>Fieldset 1</legend>
    <table class="gridtable">
        <tr><td><input id="inRed" class="inChecks" type="checkbox" checked="checked" data-color='#ff1005' /></td><td>Red</td></tr>
        <tr><td><input id="inBlue" class="inChecks" type="checkbox" data-color='#00adff' /></td><td>Blue</td></tr>
    </table>
    <div class="colorDiv"></div>
</fieldset>

---

下面是一个用于更改绑定问题的工作

使用jQuery$：checkbox.onchange，函数{//'this'将是元素}。尽可能避免使用事件绑定的属性。谢谢，fiddle Updated还可以简化此ifelement。propchecked{cloField.finddivClassSel.toggletrue；}else{cloField.finddivClassSel.togglefalse；}只需通过cloField.finddivClassSel.toggleelement.propchecked；这很好，但是在切换该部分之后，我仍然需要执行一些操作，以便if/else有其意义。确保divClassSel有一个点作为您发布的日志中的第一个字符，但它没有；2.在cloField.html中查看是否真的有一个包含类divClassSel的元素。这是代码中的一个问题，但我认为真正的问题是关于findright的，我对onchange没有问题，因为它不适用于JSFIDLE。问题是，find以某种方式返回空object，而这个迭代通过每个元素都在这里，因为一些值可能是应用程序预先填充的。@Gagan谢谢。我更改了链接。

<fieldset id="field1">
    <legend>Fieldset 1</legend>
    <table class="gridtable">
        <tr><td><input id="inRed" class="inChecks" type="checkbox" checked="checked" data-color='#ff1005' /></td><td>Red</td></tr>
        <tr><td><input id="inBlue" class="inChecks" type="checkbox" data-color='#00adff' /></td><td>Blue</td></tr>
    </table>
    <div class="colorDiv"></div>
</fieldset>

$(document).ready(function(){
    $('#field1').colorField();
    $('#field2').colorField();
});