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>

我想要的是，如果我点击显示，只会显示已拍摄列表，其他人会隐藏。我搜索但没有找到好结果。这也可以用jQuery吗？我在jQuery方面不是很好。任何帮助将不胜感激。

Answer 1

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

Answer 2

您可以使用：

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

演示 here

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

Answer 3

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

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

仅显示许多特定列表项

4 个答案: