0

私はこれを持っています

HTML

<p class="showOnlyChoose"> Show </p>

<ul>
  <li>Not Taken</li>
  <li>Not Taken</li>
  <li class="Choose">Taken</li>
  <li>Not Taken</li>
  <li class="Choose">Taken</li>
  <li>Not Taken</li>

</ul>

私が望んでいるのは、[表示] をクリックすると、撮影済みリストのみが表示され、他のリストは非表示になることです。検索しましたが、良い結果が見つかりませんでした。また、これは jQuery で可能ですか? 私はjQueryがあまり得意ではありません。どんな助けでも大歓迎です。

4

4 に答える 4

2 
$('.showOnlyChoose').on('click', function() {
   $('li.Choose').show().siblings().hide();       
   // $('li').hide().filter('.Choose').show();
})
于 2013-08-16T17:32:25.663 に答える
1

これを使用できます：

$('.showOnlyChoose').click(function(){
    $('li').toggle();
    $('li.Choose').show();
    var current_text = $(this).text();
    $(this).text(current_text == "Show" ? "Show" : "Hide"); 
});

デモはこちら

そして、それらを元に戻したいときは、次を使用してください：$('li').show();

于 2013-08-16T17:34:14.053 に答える
1

段落で「Not Taken」行を切り替えて、「Show」を「Hide」に変更する（またはその逆）場合は、次を使用します。

$('.showOnlyChoose').on('click', function() {
    $('li').toggle();                               //show or hide all items
    $('li.Choose').show();                          //show .Choose items
    if ($('.showOnlyChoose').html() == 'Show') {    //if paragraph says "Show" change to "Hide"...
        $('.showOnlyChoose').html('Hide');
    }
    else $('.showOnlyChoose').html('Show');         //...otherwise change "Hide" to "Show"
})

編集:「表示」/「非表示」機能を追加しました。

于 2013-08-16T17:48:44.990 に答える