基于变量值的jQuery多个if语句简化？答案

【问题标题】：jQuery multiple if statements based on a variable value simplify?基于变量值的jQuery多个if语句简化？
【发布时间】：2012-12-17 13:01:56
【问题描述】：

我已经为一些杂志问题建立了一个不断变化的横幅，它完全按照我想要的方式工作，但我想知道是否有比我用来检查“issueTotal”的所有 if 语句更好的选择，这看起来像回练习，但这是目前我能想到的唯一方法。

任何回复将不胜感激，在此先感谢。

jQuery

 var issueTotal = 0;



$(document).ready(function(){

$('#backIssue0').show();

$('.prevButton').hide();    

$('.nextButton').click(function(e) {
    e.preventDefault();

    issueTotal = issueTotal + 1;

    if(issueTotal > 0){
        $('.prevButton').show();
    }
    if(issueTotal < 4){
        $('.nextButton').show();
    }    
    if(issueTotal > 3){
        $('.nextButton').hide();
    }

    if(issueTotal == 0){
        $('#backIssue0').show();
    }
    if(issueTotal == 1){
        $('#backIssue0').hide();
        $('#backIssue1').show();
    }
    if(issueTotal == 2){
        $('#backIssue1').hide();
        $('#backIssue2').show();
    }
    if(issueTotal == 3){
        $('#backIssue2').hide();
        $('#backIssue3').show();
    }
    if(issueTotal == 4){
        $('#backIssue3').hide();
        $('#backIssue4').show();
    }

});


$('.prevButton').click(function(e) {
    e.preventDefault();

    issueTotal = issueTotal - 1;

    if(issueTotal > 1){
        $('.prevButton').show();
    }
    if(issueTotal < 1){
        $('.prevButton').hide();
    }
    if(issueTotal < 4){
        $('.nextButton').show();
    }    
    if(issueTotal > 3){
        $('.nextButton').hide();
    }

    if(issueTotal == 0){
        $('#backIssue0').show();
    }
    if(issueTotal == 1){
        $('#backIssue0').hide();
        $('#backIssue1').show();
    }
    if(issueTotal == 2){
        $('#backIssue1').hide();
        $('#backIssue2').show();
    }
    if(issueTotal == 3){
        $('#backIssue2').hide();
        $('#backIssue3').show();
    }
    if(issueTotal == 4){
        $('#backIssue3').hide();
        $('#backIssue4').show();
    }
});

 });

我已经为示例构建了一个 js fiddle：

http://jsfiddle.net/huddds/5Z39B/

【问题讨论】：

标签： jquery banner simplify

【解决方案1】：

你可以替换

if(issueTotal == 0){
    $('#backIssue0').show();
}
if(issueTotal == 1){
    $('#backIssue0').hide();
    $('#backIssue1').show();
}
if(issueTotal == 2){
    $('#backIssue1').hide();
    $('#backIssue2').show();
}
if(issueTotal == 3){
    $('#backIssue2').hide();
    $('#backIssue3').show();
}
if(issueTotal == 4){
    $('#backIssue3').hide();
    $('#backIssue4').show();
}

用这个：

$("#backIssue" + issueTotal).show();
if(issueTotal > 0) {
    $('#backIssue' + (issueTotal - 1)).hide();
}

为其他人尝试类似的方法。

【讨论】：

感谢您的回答，我正在尝试类似的方法，但无法使其正常工作，因此求助于 is 语句。完美答案

【解决方案2】：

您可以将issue 类属性附加到每个问题元素，然后在 prev-next 单击时执行以下操作：

$('.issue').hide();
$('#backIssue' + issueTotal).show();

【讨论】：

【解决方案3】：

本节：

if(issueTotal < 4){
    $('.nextButton').show();
}    
if(issueTotal > 3){
    $('.nextButton').hide();
}

有点尴尬。只有其中一个条件为真（如果您使用整数，它不能小于 4 并且大于 3），所以您不应该使用两个 if 语句；单个if-else 语句将获得相同的结果并且更具可读性。你可以这样做：

$('.nextButton').toggle(issueTotal <= 3);

如果issueTotal 小于或等于3（与< 4 相同，但至少对我来说更有意义），它将显示所有匹配元素，否则它将隐藏它们。

【讨论】：

喜欢这个开关。更新了我的使用建议

【解决方案4】：

这是我的建议。注意这是完整的代码

我隐藏了 prevbutton 默认并将 class="issue" 添加到 div 并使用此通用代码

DEMO

var issueTotal = $(".issue").size(); // or hardcode 5 if you must
var currentIssue=0;

$('#backIssue'+currentIssue).show(); // show initial cover

$('.nextButton, .prevButton').click(function(e) {
    e.preventDefault();

    $('#backIssue'+currentIssue).hide(); // hide current cover 
    currentIssue+=(this.className=="prevButton"?-1:1); // back or forward?

    $('.prevButton').toggle(currentIssue > 0); // show previous or not
    $('.nextButton').toggle(currentIssue <  issueTotal-1); // show next or not

    $('#backIssue'+currentIssue).show(); // show current issue
});

【讨论】：