使用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();
  });
});