Question

在多个地方使用特定类时如何选择。我想在单击“感觉类”时显示“隐藏类”，隐藏类和感觉类在文档中使用了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>

Answer 1

您将目标定位在当前元素旁边，因此您应该使用jQuery的next()。

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

但是jQuery吸引了您，他们有了find()，这正是您在这种情况下想要使用的。 next()的基本作用是使该元素紧挨当前元素。由于next()类紧邻hide类，因此feel将起作用。

您可能还会猜到，next()的反义词是next()，它使元素在当前元素之前。

prev()

这是一个JS Fiddle示例：

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

Answer 2

您应该使用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>

Answer 3

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

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

如何选择特定类别的onClick

3 个答案: