javascript - 仅显示许多特定列表项

Question

我有这个

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>

我想要的是，如果我单击Show only the Taken列表将显示而其他人将隐藏。我搜索但没有找到好的结果。这也可以用 jQuery 吗？我不太擅长 jQuery。任何帮助将不胜感激。

Answer 1

$('.showOnlyChoose').on('click', function() {
   $('li.Choose').show().siblings().hide();       
   // $('li').hide().filter('.Choose').show();
})

Answer 2

如果您希望段落切换“未采用”行并将“显示”更改为“隐藏”（反之亦然），请使用：

$('.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"
})

编辑：添加了“显示”/“隐藏”功能。

Answer 3

你可以使用这个：

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

演示在这里

当你想让它们回来时，只需使用：$('li').show();

Answer 4

如果要按内容选择元素，可以使用 $(selector).text()

$(".showOnlyChoose").click(function() {
   $("ul li").each(function(){
       if($(this).text() !=  'Taken') {
          $(this).hide();
       }
   });
});

如果要按班级选择：

$(".showOnlyChoose").click(function() {
   $("ul li").each(function(){
      if(!$(this).hasClass("Choose") {
          $(this).hide();
      }
   });
});