Question

.show和.hide jQuery代码适用于课程<span>和.q_open的每个q_close。我很清楚，因为我的所有<div>标记都有.answer类，因此当我点击任意<span>时，它们会显示和隐藏两个答案。有没有办法在点击<div class=".answer">代码时仅引用一个<span>而不是为每个<div>提供不同的class？谢谢！

JavaScript代码：

<script type="text/javascript">
    $(function() {
      $(".q_open").each(function() {
        $(this).click(function() {
          $(".answer").show();
        });
      })
      $(".q_close").each(function() {
        $(this).click(function() {
          $(".answer").hide();
        });
      });
    });
  </script>

HTML代码：

<h2 class="question">
          Q1: (the first question)
          <span class="q_open"></span>
          <span class="q_close"></span>
        </h2>
        <div class="answer" style="display: none;">
          This should only open when clicked by the <span class="q_open"> for Q1.
        </div>
        <h2 class="question">
          Q2: (the second question)
          <span class="q_open"></span>
          <span class="q_close"></span>
        </h2>
        <div class="answer" style="display: none;">
          <p>
           This should only open when clicked by the <span class="q_open"> for Q2.
          </p>
        </div>

Answer 1

我认为你正在寻找某种手风琴。为此，您需要将确切的HTML元素定位为打开或关闭。

试试这个：

$(function() {
  $(".q_open").click(function() {
    // Select the related target to open
    $(this).closest("h2").next(".answer").slideDown();
  });

  $(".q_close").click(function() {
    // Select the related target to close
    $(this).closest("h2").next(".answer").slideUp();
  });
});

以下是工作示例：https://jsfiddle.net/ashishanexpert/1xydbj22/

Answer 2

使用

$(this).find('.answer').show()

像这样：

<script type="text/javascript">
    $(function() {
      $(".q_open").each(function() {
        $(this).click(function() {
          $(this).find('.answer').show();
        });
      })
      $(".q_close").each(function() {
        $(this).click(function() {
          $(this).find('.answer').hide();
        });
      });
    });
  </script>

Answer 3

用id

替换class

 <script type="text/javascript">
 $(function() {
  $("#q1_open").click(function() {
      $("#answer1").show();
  });
 $("#q2_open").click(function() {
      $("#answer2").show();
  });
  $(".q_close").each(function() {
    $(this).click(function() {
      $("#answer1").hide();
      $("#answer2").hide();
    });
  });
});

Answer 4

使用closest()方法查找遍历DOM树中祖先的第一个元素。

.next()将获得匹配元素集中每个元素的紧随其后的兄弟。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h2 class="question">
          Q1: (the first question)
          <span class="q_open">Open</span>
          <span class="q_close">Close</span>
        </h2>
<div class="answer" style="display: none;">
  This should only open when clicked by the <span class="q_open"> for Q1.</span>
</div>
<h2 class="question">
          Q2: (the second question)
          <span class="q_open">Open</span>
  <span class="q_close">Close</span>
  </h2>
<div class="answer" style="display: none;">
  <p>
    This should only open when clicked by the <span class="q_open"> for Q2.</span>
  </p>
</div>

{{1}}

使用jQuery .hide / .show仅显示和隐藏一个<div>

4 个答案: