Javascript 将特定JS转换为通用jQuery脚本（示例）

与jQuery相比，我更熟悉JS，但似乎我需要扩展对后者的了解，以实现我的目标

我有这样一个代码：它有一个按钮，在黑色、绿色和红色之间切换，并且分别不选中方框、方框1或方框2

JS中的示例：

但是我需要使脚本更加通用化，以便它可以用于任何按钮/复选框。这是我迄今为止开始的，但我不知道如何将它与JS等颜色属性结合起来

---

谢谢你的帮助

您不必使用jQuery来完成此任务。这是一个纯JS解决方案，我将您的复选框/按钮集包装成一个简单的方式来允许更多，然后使用数据颜色属性来设置哪个颜色索引可以轻松地对照文本进行检查，这也是我们是否设置复选框的原因

HTML

JavaScript

---

下面是使用jQuery的一个更通用的选项：

内容：

<div class='example-container'>
    <input type="checkbox"  />
    <input type="checkbox"  />
    <input type="button"  value="box" />
</div>

---

它对HTML元素的依赖性较小，并且支持任意数量的复选框和双向更新。

您想要类似的东西吗？这似乎很好，只是我计划有多个按钮，带有两个相应的复选框。在这个解决方案中，我需要分别对每个分组进行div，并添加相应的colorCycle。我的偏好是jQuery将查看按钮的值，并对ID为value1和value2的复选框进行操作。此外，当循环仅在第一次到第二次对复选框有效时。当你循环回到黑色，然后是其他颜色时，复选框保持未选中状态。我认为这个解决方案会遇到与第一个相同的问题。我想那是因为我没有清楚地解释我自己。我之所以想到jQuery，是因为我计划有很多按钮，其中有两个对应的复选框。因此，通用代码将查看按钮的值，并对ID为value1和value2的复选框进行操作。是的，看看JSFIDLE，我已经演示了多个按钮/复选框：

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

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

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

<div class='example-container'>
    <input type="checkbox"  />
    <input type="checkbox"  />
    <input type="button"  value="box" />
</div>

function colorCycle(container, colors) {
  colors = colors || ["black", "green", "red"];
  var button = container.find(':button');
  var checkboxes = container.find(':checkbox');
  var index = 0;

  function setIndex(newIndex) {
    index = newIndex;
    checkboxes.attr('checked', false);
    if (index > 0)
      $(checkboxes[index - 1]).attr('checked', true)

    button.css('color', colors[index]);
  }

  button.click(function () {
    setIndex((index + 1) % (checkboxes.length + 1));
  });

  // Optional bidirectional support:
  checkboxes.change(function () {
    var checkbox = $(this);
    if (!checkbox.attr('checked')) {
      setIndex(0);
    } 
    else {
      setIndex(checkboxes.index(checkbox) + 1);
    }
  });
}

$(function () {
  colorCycle($('.example-container'));
});