Question

当我点击e复选框时，会出现另一个字段，某些字段将消失。我用一个简单的if-else逻辑编写了一个函数来执行此操作。但对于多个if-else逻辑，某个块会覆盖另一个块。我使用返回，但仍然没有工作。这是我的代码。

   function checkCheckbox() {
        if ($('#irregular').is(":checked")) {
            $('#daysOfInactivity').show();
            $("#targetPointDiv").hide();
            $("#targetTransactionDiv").hide();
            $("#fixedTimeDiv").hide();
            $("#isNumOfTrans").hide();
            return;
        } else {
            $('#daysOfInactivity').hide();
            $("#targetPointDiv").show();
            $("#targetTransactionDiv").show();
            $("#fixedTimeDiv").show();
            $("#isNumOfTrans").show();
            return;
        }
        if ($('#isNumOfTrans').is(":checked")) {
            $('#numOfTrans').show();
            $("#targetPointDiv").hide();
            $("#targetTransactionDiv").hide();
            $("#fixedTimeDiv").hide();
            return;
        } else {
            $('#numOfTrans').hide();
            $("#targetPointDiv").hide();
            $("#targetTransactionDiv").hide();
            $("#fixedTimeDiv").hide();
            return;
        }

}

Answer 1

@ Sayed Mahmud Raihan您可以尝试这样的事情。

$(document).ready(function(){
    $('#irregular').change(function(){
        if ($(this).is(":checked")) {
           $('#daysOfInactivity').show();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').hide();

        } else {
           $('#daysOfInactivity').hide();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').show();
        }
    });

    $('#isNumOfTrans').change(function(){
        if ($(this).is(":checked")) {
           $('#numOfTrans').show();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();
        } else 
           $('#numOfTrans, #targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();

    });
}

或者以这种方式 -

function checkCheckBox(){
   $('#irregular').change(function(){
        if ($(this).is(":checked")) {
           $('#daysOfInactivity').show();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').hide();

        } else {
           $('#daysOfInactivity').hide();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').show();
        }
    });

    $('#isNumOfTrans').change(function(){
        if ($(this).is(":checked")) {
           $('#numOfTrans').show();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();
        } else 
           $('#numOfTrans, #targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();

    });
}
$(document).ready(checkCheckBox);

或者这样 -

function checkCheckBox(){
   $('#irregular').change(function(){
           $('#daysOfInactivity')[$(this).is(":checked")?'show':'hide'];
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans')[!($(this).is(":checked"))?'show':'hide'];
    });

    $('#isNumOfTrans').change(function(){
           $('#numOfTrans')[(this).is(":checked")?'show':'hide'];
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();  
    });
}
$(document).ready(checkCheckBox);

Answer 2

以下代码段永远不会执行：

if ($('#isNumOfTrans').is(":checked")) {
        $('#numOfTrans').show();
        $("#targetPointDiv").hide();
        $("#targetTransactionDiv").hide();
        $("#fixedTimeDiv").hide();
        return;
    } else {
        $('#numOfTrans').hide();
        $("#targetPointDiv").hide();
        $("#targetTransactionDiv").hide();
        $("#fixedTimeDiv").hide();
        return;
    }

这是因为第一个if块有一个return语句，永远不会允许代码到达上面的块。这很可能导致异常行为！考虑将逻辑与if块分开，因为存在重叠条件！

Answer 3

{{1}}

我认为这可以帮助您删除元素的返回和切换可见性。我强烈推荐@APL方法。

如何避免覆盖多个if-else块？

3 个答案: