使用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"]')
• 输入type =“ number”，即$('input[type="number"]')

Answer 2

另一个选项（除了已经给出的答案）是，您可以使用切换按钮隐藏/显示（允许您使用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”）

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

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

您应该浏览所有选择器

Answer 4

尝试使用该类：

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