1

私はjQueryよりもJSに精通していますが、私がやろうとしていることを達成するには、後者の知識を広げる必要があるようです.

私はこのコードを持っています：これには、黒、緑、赤を切り替えるボタンがあり、それぞれボックス、ボックス1、ボックス2のいずれもチェックしません。

JS での例: JS デモ

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

ご協力いただきありがとうございます！

4

2 に答える 2

0

これを実現するために jQuery を使用する必要はありません。ここに純粋なJSソリューションがあります。チェックボックス/ボタンセットを<div class="color-set">簡単にラップして、より多くのことを許可し、data-color属性を使用して、チェックボックスを設定するかどうかのカラーインデックスを設定します(テキストに対しても簡単にチェックできます)。 .

jsフィドル

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);
    }
});
于 2013-03-30T17:30:22.173 に答える