0

私はjqueryが初めてです。このコードでは、私は醜いと思います。これをより短いバージョンに改善するのを手伝ってくれる人はいますか? 実際のコードは 6 つ以上のコントロールなので、コードを見やすくするために残りを削除します。したがって、実際のコードはもっと醜いです:(

    $('#targetDay_0__Assigned , #targetDay_1__Assigned').hide();
        if ($('#targetDay_0__Assigned').is(":checked")) { 
            $('#lbltargetDay_0__Assigned').addClass("ui-state-active"); 
        }

        if ($('#targetDay_1__Assigned').is(":checked")) {
            $('#lbltargetDay_1__Assigned').addClass("ui-state-active");
        }


        $('#lbltargetDay_0__Assigned').click(function (e) {
            $('#targetDay_0__Assigned').click();
            $('#lbltargetDay_0__Assigned').removeClass("ui-state-active");
            if ($('#targetDay_0__Assigned').is(":checked")) {
                $('#lbltargetDay_0__Assigned').addClass("ui-state-active");
            }
        });

        $('#lbltargetDay_1__Assigned').click(function (e) {
            $('#targetDay_1__Assigned').click();
            $('#lbltargetDay_1__Assigned').removeClass("ui-state-active");
            if ($('#targetDay_1__Assigned').is(":checked")) {
                $('#lbltargetDay_1__Assigned').addClass("ui-state-active");
            }
        });
4

2 に答える 2

0

上部の DOM 内のさまざまな要素の変数を作成し、代わりにその変数を使用して、jQuery を介して DOM に再度アクセスします。

        var targetDay0Assigned = $('#targetDay_0__Assigned'); 
        var targetDay1Assigned = $('#targetDay_1__Assigned'); 
        var lbltargetDay0Assigned = $('#lbltargetDay_0__Assigned'); 
        var lbltargetDay1Assigned = $('#lbltargetDay_1__Assigned'); 

        targetDay1Assigned.hide();
        targetDay0Assigned.hide();
        if (targetDay0Assigned.is(":checked")) { 
           lbltargetDay0Assigned.addClass("ui-state-active"); 
        }

        if (targetDay1Assigned.is(":checked")) {
            lbltargetDay1Assigned.addClass("ui-state-active");
        }


        lbltargetDay0Assigned.click(function (e) {
           targetDay0Assigned.click();
           lbltargetDay0Assigned.removeClass("ui-state-active");
            if (targetDay0Assigned.is(":checked")) {
                lbltargetDay0Assigned.addClass("ui-state-active");
            }
        });

        lbltargetDay1Assigned.click(function (e) {
           targetDay1Assigned.click();
            lbltargetDay1Assigned.removeClass("ui-state-active");
            if (targetDay1Assigned.is(":checked")) {
                lbltargetDay1Assigned.addClass("ui-state-active");
            }
        });
于 2013-07-24T10:50:05.827 に答える
0

このようなものはうまくいくかもしれません：

var targets = [], labels = [], totalElements = 6;

function changeState(index) {
    if (targets[index].is(":checked")) { 
        labels[index].addClass("ui-state-active"); 
    } else {
        labels[index].removeClass("ui-state-active");
    }
}

function click(index) {
    labels[index].click(function (e) {
        targets[index].click();
        changeState(index);
    });
}

for(var index = 0; index<=totalElements; index++) {
    //store the elements for later access
    targets.push($('#targetDay_' + index + '__Assigned').hide());
    labels.push($('#lbltargetDay_' + index + '__Assigned'));

    //initial state change
    changeState(index);
    //bind the click events
    click(index);
}

他の場所でそれらにアクセスしたい場合は、要素のインデックス、つまりtargets[4]を参照してください。

于 2013-07-24T11:08:15.977 に答える