切換DIV而不切換所有名稱相似的DIV

Question

我正在創建一個Q &測試準備，有幾個問題，每個問題都有四個可能的答案，然後在答案下方有一個「答案」按鈕，顯示真實答案。我得到了一切正常工作，直到我意識到我有它，所以任何「答案」按鈕將切換所有的內容DIVs。我怎樣才能讓「答案」按鈕只打開前面的「內容」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')代替。

Answer 2

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

Answer 3

您需要參考this在點擊處理程序，以確定被點擊的按鈕，然後找到以前的兄弟，表示要顯示這樣的內容：

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