0

ページに 10 個のアイテムがリストされており、各アイテムの横にチェックボックスがあります。各アイテム間の依存関係を表すツールを作成したいと考えています。

例: アイテム 2、3、および 4 が機能するには、アイテム 1 が必要です。項目 2、4、および 5 が機能するには、項目 3 が必要です。項目 1 だけの横にあるチェックボックスをクリックすると、項目 1、2、3、および 4 のテキストの色をデフォルトの緑から赤に変更したいと思います (前提条件のデータ項目が変更されたため、現在は機能しないことを示しています)。がチェックされます）。項目 3 だけの横にあるチェックボックスをクリックすると、項目 2、3、4、および 5 のテキストの色を赤に変更し、項目 1 は緑のままにしたいと思います。

アイテム 1 が既にチェックされていると仮定し、次にアイテム 3 をチェックします。アイテム 1 から 4 までを赤のままにして、アイテム 5 も赤くします。この時点で項目 1 のチェックを外すと、項目 2、3、4、および 5 も項目 3 のチェックボックスに依存するため、項目 1 のみが緑色になるはずです。緑になり、残りは赤のままです。

JQuery で toggleClass 関数を使用してみましたが、望ましい結果が得られませんでした。JQueryでこれを達成する最良の方法は何ですか?

試行されたトグル コード:

$('#item1').click(function(){
    var item = this.checked;
    $('#item1, #item2, #item3, #item4').toggleClass('green', !item).toggleClass('red', item);
});

$('#item3').click(function(){
    var item = this.checked;
    $('#item5, #item2, #item3, #item4').toggleClass('green', !item).toggleClass('red', item);
});

このコードは最初は機能しましたが、ある項目が既にチェックされていて、別の項目がチェックされてから削除された場合、正しい結果が表示されませんでした。

4

2 に答える 2

0

これで問題が解決すると思います：

HTML:

<input type="checkbox" id="item1" /><label for="item1" class="green">item1</label><br />
<input type="checkbox" id="item2" /><label for="item2" class="green">item2</label><br />
<input type="checkbox" id="item3" /><label for="item3" class="green">item3</label><br />
<input type="checkbox" id="item4" /><label for="item4" class="green">item4</label><br />
<input type="checkbox" id="item5" /><label for="item5" class="green">item5</label><br />

JavaScript:

// Define the checkboxes dependencies
var dependencies = {
    "#item1": ["#item1"],
    "#item2": ["#item1", "#item3"],
    "#item3": ["#item1", "#item3"],
    "#item4": ["#item1", "#item3"],
    "#item5": ["#item3"]
};

$(function() {
    // When any checkbox is clicked
    $("input:checkbox").change(function() {
        // Go through all dependencies
        $.each(dependencies, function(k, v) {
            var colour = "green";
            $.each(v, function(i, e) {
                // If any dependency is checked, then the current item needs to be red
                if ($(e + ":checked").length) {
                    colour = "red";
                }
            });

            // Get label corresponding to current item
            var label = $("label[for='" + $(k).attr("id") + "']");
            // And give it the correct class
            label.removeClass("green").removeClass("red").addClass(colour);
        });
    });
});

ディクショナリにはすべてのdependenciesアイテムがリストされ、各アイテムが依存するアイテムもリストされます。

たとえば、指定された定義でitem2は、item1またはitem3がチェックitem5されている場合は赤になり、がチェックされている場合は赤になりitem3ます。

于 2013-09-19T06:59:35.320 に答える