使用Jquery隐藏/显示多个项目

Question

我已经四处寻找并且似乎对所有提出类似问题的人都给出了相同的答案，所以如果看起来过于简单，请原谅我。我只想按下一个按钮就可以同时隐藏/显示多个项目，这似乎是我通过使用类处理它来实现这一目的的唯一方法，如下所示：

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").hide();
  });
$(".btn2").click(function(){
    $("p").show();
  });
});

和html如下

<p class="test">If you click on the "Hide" button, I will disappear.</p>
<p class="test">If you click on the "Hide" button, this also disappears.</p>

我不想使用像

这样的html选择器

<p>

在我的例子中，因为我想将它用于不同类型的项目。

Answer 1

使用css类怎么样？

  $(".btn1").click(function(){
    $(".class-to-hide").hide();
  });

HTML

<div class="class-to-hide">
    <p>will hide</p>
</div>
<div>
    <p class="class-to-hide">will also hide</p>
</div>

你可以使用无数的选项，只需熟悉你的jQuery选择器并选择你的选择..

• 您可以使用类$('.something')
• data-target =“something”，即$('*[data-target="something"]')
• 输入类型=“数字”，即$('input[type="number"]')

Answer 2

另一个选项（此外已经提供了答案）是您可以使用toggle来隐藏/显示（允许您使用1个按钮而不是2个）：

<p class="test">If you click on the "Hide" button, I will disappear.</p>
<p class="test">If you click on the "Hide" button, this also disappears.</p>

将同时隐藏和显示。

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p.test").toggle();
  });
});

Answer 3

您可以使用Class Selector (".class")

  

选择具有给定类的所有元素。

//It will select all paragraph with the given class
$("p.test").hide();

您应该浏览所有selectors

Answer 4

请尝试使用该类：

$(document).ready(function(){
  $(".test").click(function(){
    $("p").hide();
  });
$(".test").click(function(){
    $("p").show();
  });
});