javascript - 将特定 JS 转换为通用 jQuery 脚本(示例)

Question

我对 JS 比 jQuery 更熟悉，但看起来我需要扩展对后者的知识才能实现我想要做的事情。

我有这样的代码:它有一个按钮，可以在黑色、绿色和红色之间切换，并且分别不检查框、框 1 或框 2。

JS 中的示例:JS demo

var colors = ["green", "red", "black"];

function setColor(el) {
   el.colorIdx = el.colorIdx || 0;
   el.style.color = colors[el.colorIdx++ % colors.length];
document.getElementById('box1').checked = el.style.color == 'green';
document.getElementById('box2').checked = el.style.color == 'red';
}

但我需要使脚本更加通用，以便它适用于任何按钮/复选框。这是我到目前为止已经开始的，但我不知道如何将它与像JS这样的颜色属性结合起来。

jQuery

$("input").on('click', function () {
    $("[name^=" + this.value + 1 + "]").attr('checked', true)
    $("[name^=" + this.value + 2 + "]").attr('checked', true) 
})

感谢您的帮助!

Answer 1

您不必使用 jQuery 来完成此任务。这是一个纯 JS 解决方案，我将您的复选框/按钮集包装在 <div class="color-set"> 中一个简单的方法来允许更多，然后使用 data-color属性来设置我们是否设置复选框的颜色索引(也可以轻松地对照文本进行检查)。

jsFiddle

HTML

<div class="color-set">
    <input type="checkbox" data-color="0" />
    <input type="checkbox" data-color="1" />
    <input type="button" value="box" />
</div>

JavaScript

var colors = ["green", "red", "black"];

function setColor() {
    this.colorIdx = (this.colorIdx || 0) % colors.length;
    this.style.color = colors[this.colorIdx];

    for (var i = 0; i < this.checkboxes.length; i++) {
        this.checkboxes[i].checked = this.colorIdx == this.checkboxes[i].getAttribute('data-color');
    }

    this.colorIdx++;
}

window.addEventListener('load', function() {
    var colorSet = document.getElementsByClassName('color-set');

    for (var i = 0; i < colorSet.length; i++) {
        var button = colorSet[i].querySelector('input[type=button]');
        button.checkboxes = colorSet[i].querySelectorAll('input[type=checkbox]');
        button.addEventListener('click', setColor);
    }
});