0

我已经为一些杂志问题建立了一个不断变化的横幅，它完全按照我想要的方式工作，但我想知道是否有比我用来检查“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/

4

4 回答 4

5

你可以更换

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

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

于 2012-12-17T13:07:40.090 回答
1

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

$('.issue').hide();
$('#backIssue' + issueTotal).show();
于 2012-12-17T13:07:29.607 回答
1

本节：

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

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

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

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

于 2012-12-17T13:17:12.103 回答
1

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

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

演示

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
});
于 2012-12-17T13:21:08.697 回答