javascript - 切换 DIV，而不切换所有类似名称的 DIV

Question

我正在创建一个问答测试准备，其中有几个问题，每个问题后面有四个可能的答案，然后在答案下方有一个“答案”按钮，可显示真实答案。我让一切工作正常，直到我意识到我拥有它，所以任何“应答”按钮都会切换所有内容 DIV。如何使“应答”按钮仅切换打开其前面的“内容”div？

请记住，我无法分配唯一的 ID，因为有数百个问题，而我正在努力节省时间。

jQuery:

$(function() {  
   $(".answer").click(function() {  
      $(".content").toggle("slow");  
   });  
});  

CSS:

div.content {  
   display: none;  
   width: 300px;  
   height: auto;  
   margin: 10px;  
   padding: 20px;  
   background: white;  
   border: 1px solid black;  
   cursor: pointer;  
}

button.answer {  
   font-family: sans-serif;  
   font-weight: bold;  
   font-style: normal;  
   font-size: 0.92em;  
   line-height: 1.36em;  
   text-indent: 0em;  
   text-align: left;  
   color: #000000;  
   margin: 1em 0em 0em 2em;
}  

HTML:

<div class="keep">
  <p class="q"><samp class="q-no">1.</samp> Interpret the following directions:</p>
  <p class="q-equation">i cap po qid × 10d</p>
  <p class="an"><span class="choice">a.</span> Take one capsule by mouth four times a day for ten days.</p>
  <p class="an"><span class="choice">b.</span> Take one capsule by mouth three times a day for ten days.</p>
  <p class="an"><span class="choice">c.</span> Take one capsule by mouth twice a day for ten days.</p>
  <p class="an"><span class="choice">d.</span> Take one capsule by mouth once a day for ten days.</p>

  <div class="content">
    <p class="anl"><b>a.</b> Take one capsule by mouth four times a day for ten days. Remember: <i>qd</i> is once a day, <i>bid</i> is twice a day, <i>tid</i> is three times a day and <i>qid</i> is four times a day.</p><a id="anchor-25-anchor"></a>
  </div>
  <button class="answer">Answer</button>
</div>

<div class="keep">
  <p class="q"><samp class="q-no">2.</samp> Interpret the following directions:</p>
  <p class="q-equation">ii tab po tid × 7d.</p>
  <p class="an"><span class="choice">a.</span> Take two tablets by mouth four times a day for seven days.</p>
  <p class="an"><span class="choice">b.</span> Take two tablets by mouth three times a day for seven days.</p>
  <p class="an"><span class="choice">c.</span> Take two tablets by mouth twice a day for seven days.</p>
  <p class="an"><span class="choice">d.</span> Take two tablets by mouth once a day for seven days.</p>

  <div class="content">
    <p class="anl" id="anchor-25-anchor"><b>b.</b> Take two tablets by mouth three times a day for seven days.</p><a id="anchor-26-anchor"></a>
  </div>
  <button class="answer">Answer</button>
</div>

Answer 1

尝试使用.prev()功能:

$(function() {  
    $(".answer").click(function() {  
        $(this).prev().toggle("slow");  
    });  
});

如果 .content 并不总是直接位于 .answer 之前，请改用 .prev('.content')。