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

像这样的东西可以工作：

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

然后，如果您想在其他地方访问它们，只需参考元素的索引，即目标 [4]；

于 2013-07-24T11:08:15.977 回答
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 回答