jQuery .DRY DRY代码

Question

我有使用' bootstraptoggle '插件放在一起的复选框。 我正在基于选中的框构建mongoDB查询。

该代码可以正常工作，但是我讨厌重复.change，有什么方法可以使这个DRY吗？

我有以下代码

HTML

<div id="checkBoxContainer" class="container">
     <label class="checkbox-inline">
          <input type="checkbox" id="optionOne" data-onstyle="success" data- offstyle="danger" data-toggle="toggle">
     </label>
     <label class="checkbox-inline">
          <input type="checkbox" id="optionTwo" data-onstyle="success" data- offstyle="danger" data-toggle="toggle">
     </label>
</div>

JS

$('#optionOne').change(function() {
    if ($(this).prop('checked') == true) {
        queryBuilder.push($(this).attr("id"));
    } else if ($(this).prop('checked') == false) {
        queryBuilder.splice($(this).attr("id"));
    }
    console.log(queryBuilder);
});


$('#optionTwo').change(function() {
    if ($(this).prop('checked') == true) {
        queryBuilder.push($(this).attr("id"));
    } else if ($(this).prop('checked') == false) {
        queryBuilder.splice($(this).attr("id"));
    }
    console.log(queryBuilder);
});

我已经搜索并尝试了以下方法，但是没有运气。

$('document').on('change','#checkBoxContainer', function() {    
      if ($(this).prop('checked') == true) {
        queryBuilder.push($(this).attr("id"));
    } else if ($(this).prop('checked') == false) {
        queryBuilder.splice($(this).attr("id"));
    }
    console.log(queryBuilder);

});

Answer 1

有什么办法可以使它变干吗？

$('#optionOne, #optionTwo').change(...);

这就是选择器组 。 变更处理程序中的代码都没有特定于它所挂钩的元素，因此纯粹是将其挂钩到两个元素的问题。

---

无关，但是：此行可疑：

queryBuilder.splice($(this).attr("id"));

splice至少需要两个参数：从处开始执行操作的索引，以及在该位置要删除的元素数量（如果要使用更多指定插入内容的参数，则该值为0）。

如果您的目标是从数组中删除$(this).attr("id")的值，则不会这样做。 代替：

var index = queryBuilder.indexOf($(this).attr("id"));
if (index != -1) {
    queryBuilder.splice(index, 1);
}

它将找到它，然后将其删除。

---

边注：

就像斜眼说的那样， $(this).attr("id")只是编写this.id一种很长的方式，而$(this).prop("checked")只是编写this.checked一种很长的方式。 :-)

在进行比较时也没有任何理由将== true写入（ 很少有理由将=== true写入）。

最后，由于checked只能是true或false，因此不需要第二个if 。

所以：

$('#optionOne, #optionTwo').change(function() {
    var index;
    if (this.checked) {
        queryBuilder.push(this.id);
    } else {
        index = queryBuilder.indexOf(this.id);
        if (index != -1) {
            queryBuilder.splice(index, 1);
        }
    }
    console.log(queryBuilder);
});

或稍短：

$('#optionOne, #optionTwo').change(function() {
    var index;
    if (this.checked) {
        queryBuilder.push(this.id);
    } else if ((index = queryBuilder.indexOf(this.id)) != -1) {
        queryBuilder.splice(index, 1);
    }
    console.log(queryBuilder);
});

---

明显地过度分析它 ，我会注意到，如果我们认为未选中该复选框时有可能将其放置在数组中，则应该采取一些防御措施以避免将其放入两次：

$('#optionOne, #optionTwo').change(function() {
    var index = queryBuilder.indexOf(this.id);
    if (this.checked && index == -1) {
        queryBuilder.push(this.id);
    } else if (!this.checked && index != -1) {
        queryBuilder.splice(index, 1);
    }
    console.log(queryBuilder);
});

好吧，我现在停止。 :-)

---

Gah，还有一件事：一些非常老的浏览器没有Array#indexOf ，因此，如果您需要支持它们，则需要添加垫片或使用jQuery严重错误的$.inArray 。 要使用inArray ， queryBuilder.indexOf(this.id)更改为$.inArray(queryBuilder, this.id) （其他无需更改）。

Answer 2

将通用类用于通用项是最简单的方法：

<input class="option-class" type="checkbox" id="optionTwo">

。

$('.option-class').change(/* your handler code */);

尽管ID是最简单的选择器，可以将目标锁定在使用人员上，并且在使用类重复组件时可以通过将一组对象而不是一次定位到一组元素来使DRY代码更容易