Question

我在生成的网页上重构代码，并且有一个div（tab）可以多次出现。每个这样的div都有一个带有复选框的小部分，可以让你选择将要显示的其他div。

由于有可能将其他div添加到页面中，我想使代码模块化。这意味着每个复选框id都与div的class相同，它应该切换，并在末尾添加“Div”。所以我使用了已检查id，将其与“。”和“Div”连接起来，并尝试在最近的字段集中找到它。

这是几乎工作的小提琴：http://jsfiddle.net/ebwokLpf/5/（我无法找到使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);
  }
}

除了on-working 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

由于我找不到任何解决方案，有没有其他方法如何以模块化方式进行？或者是否有一些我不知道的错误？我试图避免编写一个函数，其中x检查元素id，或者每个复选框的唯一函数（以前的方式）。

Answer 1

删除内联onchange，您也不需要迭代这些元素。

只需在课程＆＃34; inCheckes＆＃34; 上写一个事件，并将当前元素引用传递给您的函数：

HTML：

<fieldset id="field1">
    <legend>Fieldset 1</legend>
    <table class="gridtable">
        <tr>
            <td>
                <input id="inRed" class="inChecks" type="checkbox" checked="checked" />
            </td>
            <td>Red</td>
        </tr>
        <tr>
            <td>
                <input id="inBlue" class="inChecks" type="checkbox" />
            </td>
            <td>Blue</td>
        </tr>
    </table>
    <div class="inDivs">
        <div class="inRedDiv redDiv"></div>
        <div class="inBlueDiv blueDiv" /></div>
</fieldset>
<fieldset id="field2">
    <legend>Fieldset 2</legend>
    <table class="gridtable">
        <tr>
            <td>
                <input id="inRed" class="inChecks" type="checkbox" />
            </td>
            <td>Red</td>
        </tr>
        <tr>
            <td>
                <input id="inBlue" class="inChecks" type="checkbox" checked="checked" />
            </td>
            <td>Blue</td>
        </tr>
    </table>
    <div class="inDivs">
        <div class="inRedDiv redDiv"></div>
        <div class="inBlueDiv blueDiv" /></div>
</fieldset>

JQUERY：

$(document).ready(function () {

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

FIDDLE：

http://jsfiddle.net/ebwokLpf/4/

Answer 2

正如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);
    }
}

Answer 3

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

您可以创建 jQuery插件来处理一个字段集的逻辑，包括在单击不同的复选框时更改颜色。这样，所有逻辑都捆绑在一个地方（在插件中），您可以稍后在上进行优化。
例如，您可以稍后决定插件应该创建字段集的整个html结构（就像jQuery UI滑块插件创建滑块元素的整个结构），因此更改插件。

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);
    });
};

该插件使用复选框的data-color - 属性来更改colorDiv容器的颜色。因此，每个复选框都需要data-color属性，但不再需要不同颜色的多个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>

现在您可以使用colorField - 插件创建实例，如下所示：

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

这是一个有效的 jsFiddle-demo

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

3 个答案:

HTML：

JQUERY：

FIDDLE：