jquery - div の表示/非表示 jQuery

Question

ページに 4 ～ 8 個の「非表示」の div が必要です。次に、「プラス」と「削除」の 2 つのボタンがあります。「プラス」ボタンをクリックすると最初の div が表示され、もう一度「プラス」ボタンをクリックすると div nr 2 が表示されます。「削除」を使用すると、div が削除されます。

条件ステートメントを使用する必要がありますか、またはこれに対する簡単な解決策はありますか?

 $(document).ready(function() {
 $('#show').click(function () {
    $("#hiddencontent").fadeIn("slow");
  });
});

score 3 · Accepted Answer

おそらく次のようなものを試すことができます

$("div:hidden").first().show();

と

$("div:visible").last().hide();

score 2 · Accepted Answer

次のコードは、最初の div を表示なしで表示します。

    $(document).ready(function() {   
        $('#show').click(function () {       
            $("div").filter(function() { 
                 return $(this).css("display") == "none" 
            }).first().show();
        });

最後に表示された div を非表示にします。

      $('#remove').click(function () {  
            $("div").filter(function() { 
                 return $(this).css("display") !== "none" 
            }).last().hide();
        });
    });

score 2 · Accepted Answer

選択を容易にするために div に共通のクラスを指定すると、次のことが可能になります。

var $divs = $(".hideShow").hide(); // cache a reference to the relevant divs,
                                   // and start with them hidden
$("#show").click(function() {
    $divs.filter(":hidden").first().fadeIn();
});
$("#hide").click(function() {
    $divs.not(":hidden").last().fadeOut();
});

デモ: http://jsfiddle.net/ua9ef/2/

:hiddenセレクターを使用すると、非表示のものだけ、または非表示のものだけを操作できます.not()。:visible（またはもちろん、セレクターを利用することもできます...）

score 0 · Accepted Answer

これは、非表示、表示、および再び非表示になる要素に（不正な名前）のクラスを使用した単純なフィドルです。.hidden次に、:hiddenと:visibleセレクターを使用します。

$("#add").click(function() {
    $(".hidden:hidden").first().show();
});

$("#remove").click(function() {
    $(".hidden:visible").last().hide();
});

score 0 · Accepted Answer

これをチェックして

var index = -1;
var max = $('.container > div').length;
$('#show').on('click', function() {
    if (index + 1 > max) {
        // Do Nothing
    } else {
        if (index < max - 1) {
            index++;
            $('.container > div:eq(' + index + ')').show();
        }


    }
});

$('#hide').on('click', function() {
    if (index == -1) {
        index = 0;
    }
    else {
        if ($('.container > div:eq(' + index + ')').is(':visible')) {
            $('.container > div:eq(' + index + ')').hide();
            index--;
        }
    }
});

フィドルをチェック

score 0 · Accepted Answer

IDは一意であり、何度も再利用することはできません。変更id="hiddencontent"してからclass="hiddencontent"、以下に従ってください。

デモjsFiddle

$(document).ready(function() {
    var index = 0;
    $('#show').click(function () {
        $('div').eq(index).fadeIn('slow');
        if(index < $('div').length){
            index++;
        }else{
            alert('There is no more hidden content!');
        }
    });
    $('#remove').click(function(){
        $('div').eq(index -1).remove();
    });
});

jQuery.eq()にはzero based index. クリック関数の外部で変数を設定しますが、クリックのスコープでは引き続き使用でき、hiddencontent を順番に切り替えます。クリックすると、インデックスが変更0 > 1 > 2 > 3されます。インデックスがクラスに一致する要素の現在の数よりも小さいかどうかを確認し、hiddencontentパスした場合は、インデックスを次の整数に反復します。

remove 関数は、最後にインデックス付けされたアイテムを削除するだけなので、反復子を変更する必要はありません (シナリオに基づいてわかる限り)。

これで十分です。

score 0 · Accepted Answer

http://jsfiddle.net/z9s8T/

CSS

div{
    display:none;
}
div.show{
    display:block;
}

HTML

<button id="show">show</button>
<button id="hide">hide</button>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

JS

$(function(){
    $('#show').click(function(){
        $('div:not(.show):eq(0)').addClass('show');
    });
    $('#hide').click(function(){
        $('div.show:last').removeClass('show');
    }); 
});

jquery - div の表示/非表示 jQuery

7 に答える 7

Related

Reference