Question

我在我的asp.net页面中使用了手风琴控件，我在用于合作手风琴控制的切换关闭功能中使用了js。但我已经传递div标头ID，请建议如何改进代码。

    function ToggleClose(divHeaderId) {

    MainDivClickCount = 1;
    if (divHeaderId == '#divBasicDetails') {

        //divPersonelDetails
        $('#divPersonelDetails img').attr({ src: '../../Images/plus-icon.png' });
        $('#divPersonelDetails').removeClass("tabMinus");
        $('#divPersonelDetails').addClass("tabPlus");
        $('#divPersonelDetails').find('table').find('tr').find('td').removeClass("tabOpen");
        $('#divPersonelDetails').find('table').find('tr').find('td').addClass("tabClose");
        $('#divOtherDetails img').attr({ src: '../../Images/plus-icon.png' });
        $('#divOtherDetails').removeClass("tabMinus");
        $('#divOtherDetails').addClass("tabPlus");
        $('#divOtherDetails').find('table').find('tr').find('td').removeClass("tabOpen");
        $('#divOtherDetails').find('table').find('tr').find('td').addClass("tabClose");

    }
    else if (divHeaderId == '#divPersonelDetails') {
        $('#divBasicDetails img').attr({ src: '../../Images/plus-icon.png' });
        $('#divBasicDetails').removeClass("tabMinus");
        $('#divBasicDetails').addClass("tabPlus");
        $('#divBasicDetails').find('table').find('tbody').find('tr').find('td').removeClass("tabOpen");
        $('#divBasicDetails').find('table').find('tbody').find('tr').find('td').addClass("tabClose");

        $('#divOtherDetails img').attr({ src: '../../Images/plus-icon.png' });
        $('#divOtherDetails').removeClass("tabMinus");
        $('#divOtherDetails').addClass("tabPlus");
        $('#divOtherDetails').find('table').find('tr').find('td').removeClass("tabOpen");
        $('#divOtherDetails').find('table').find('tr').find('td').addClass("tabClose");

 }
}

Answer 1

您可以将divBasicDetails和divPersonelDetails的选择器放入由提供的divHeaderId设置的变量中，从而大规模减少此代码。然后，当您在两个元素上执行相同逻辑时，您也可以使用divOtherDetails加入所选div，并且可以使用toggleClass代替多个addClass / removeClass调用。试试这个：

function ToggleClose(divHeaderId) {
    MainDivClickCount = 1; // this can possibly be removed, as you don't appear to use it

    var idSelector = divHeaderId == '#divBasicDetails' ? '#divPersonelDetails' : '#divBasicDetails';
    var $divs = $(idSelector).add('#divOtherDetails');

    $divs.toggleClass('tabMinus tabPlus');
    $divs.find('img').attr('src', '../../Images/plus-icon.png');
    $divs.find('table tr td').toggleClass('tabOpen tabClose');
}

如何改善我的手风琴控制崩溃（关闭）代码？

1 个答案: