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フィドルを構築しました:

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クラス属性をすべてのissue要素にアタッチしてから、前へ-次のクリックで次のようにします。

$('.issue').hide();
$('#backIssue' + issueTotal).show();
于 2012-12-17T13:07:29.607 に答える
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 に答える
1

このセクション:

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

少しぎこちないです。これらの条件の 1 つだけが true になる可能性があります (整数を使用している場合は、4 つ未満かつ 3 つを超えることはできません)。そのため、if ステートメントを 2 つ使用しないでください。単一のif-elseステートメントで同じ結果が得られ、読みやすくなります。代わりにこれを行うことができます：

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

issueTotalが 3 以下の場合は一致するすべての要素が表示されます (同じ< 4ですが、少なくとも私にとっては意味があります)。それ以外の場合は非表示になります。

于 2012-12-17T13:17:12.103 に答える