2

如何在多个地方使用特定类时选择它。我想在单击“感觉类”时显示“隐藏类”，隐藏类和感觉类在文档中使用了 3 次

我想在单击“感觉”类时显示特定的“隐藏类”

我试过了， $(this).find(className) and $(clasName , this)但它不工作

$(document).ready(function() {
  $(".hide").hide();
  $(".feel").click(function() {
    alert("s");
    $(this).find(".hide").show();
  });
});
   
  
<body>
   <script src="https://code.jquery.com/jquery.min.js"></script>
   <p class="feel">
      <b> Note: </b>
   </p>
   <p class="hide"> 
      The :hover selector style links on mouse-over.
   </p>
   <p class="feel">
      <b> Note: </b>
   </p>
   <p class="hide">
      The :hover selector style links on mouse-over.
   </p>
   <p class="feel">
      <b> Note: </b>
   </p>
   <p class="hide">
      The :hover selector style links on mouse-over.
   </p>
</body>

4

3 回答 3

2

您的目标是当前元素旁边的一个元素，因此您应该使用 jQuery 的next().

find()用于在当前元素中查找子元素，但由于具有类的元素hide不是具有类的元素的子元素，因此feel将find()不起作用。

但是 jQuery 为您提供了帮助，他们拥有next()的正是您在这种情况下想要使用的。基本上所做的是next()将元素放在当前元素旁边。由于hide班级就在feel班级旁边，因此next()将起作用。

你也可能会猜到，相反的next()是prev()which 获取当前元素之前的元素。

$(".feel").click(function() {
  alert("s");
  $(this).next(".hide").show();

});

这是一个 JS Fiddle 示例：

https://jsfiddle.net/xpvt214o/569142/

于 2018-08-08T05:16:15.533 回答
0

next()你不应该使用find；查看片段

$(document).ready(function() {
  $(".hide").hide();
  $(".feel").click(function() {
    $(this).next(".hide").show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<p class="feel"><b>Note:</b></p>
<p class="hide"> The :hover selector style links on mouse-over.</p>
<p class="feel"><b>Note:</b> </p>
<p class="hide"> The :hover selector style links on mouse-over.</p>
<p class="feel"><b>Note:</b> </p>
<p class="hide"> The :hover selector style links on mouse-over.</p>

于 2018-08-08T05:19:40.160 回答
0

next()在这种情况下，您可以使用 jquery 。

$(document).ready(function() {
  $(".hide").hide();
  $(".feel").click(function() {
    alert("s");
    $(this).next().show();
  });
});
   
  
<body>
   <script src="https://code.jquery.com/jquery.min.js"></script>
   <p class="feel">
      <b> Note: </b>
   </p>
   <p class="hide"> 
      The :hover selector style links on mouse-over.
   </p>
   <p class="feel">
      <b> Note: </b>
   </p>
   <p class="hide">
      The :hover selector style links on mouse-over.
   </p>
   <p class="feel">
      <b> Note: </b>
   </p>
   <p class="hide">
      The :hover selector style links on mouse-over.
   </p>
</body>

但是，假设您想找出具有特定类的下一个元素，然后您可以使用next('selector-here')

例如：

  $(".feel").click(function() {
    alert("s");
    $(this).next(".hide").show();
  });
于 2018-08-08T05:33:09.163 回答