javascript - 具有特定类的最接近的 div

Question

我有一个正在运行的脚本，当您单击问题时，它会在一个 div 之间切换。但它的目标是该类的每个 div。有没有办法定位最近的 div，这样当我点击问题时只有相关答案会切换？

<a class="faqquestion">The question goes here so it does?</a>  
<p class="answer1">This is the answer and Im an absolute GENIUS!!!! This is the answer and Im an absolute GENIUS!!!! This is the answer and. This is the answer and Im an.....</p>  
<p class="answer2 hidden">uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu. uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu. uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu. uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu.<br /><br />  


uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu.uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu.uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu.
</p>  


<a class="faqquestion">The question goes here so it does?</a>  
<p class="answer1">This is the answer and Im an absolute GENIUS!!!! This is the answer and Im an absolute GENIUS!!!! This is the answer and. This is the answer and Im an.....</p>  
<p class="answer2 hidden">uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu. uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu. uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu. uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu.<br /><br />  


uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu.uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu.uyigfiau faewiugfiaw ef iawugfi uwa fiwafiu wgaifbwaifg iuwagfiuawebfiu gwaiefgiuwagfuiaw gifgaiwfg iuaw gfiuwaifg iuawgfiuawgiufagwiug afwigu.
</p>  


<script>  
$(document).ready(function(){  
    $(".faqquestion").click(function () {  
      $('p.answer2').toggleClass('hidden');  
      $('p.answer1').toggleClass('hidden')  
    });  
});  
</script>

Answer 1

由于您实际上并未使用链接，因此没有真正的理由使用 <a> 。您可以使用 div，如下所示:

HTML

<div class="faqquestion">Question One?</div>  
<div class="answer1">Answer one</div>  
<div class="answer2 hidden">Answer two</div>

<div class="faqquestion">Question Two?</div>  
<div class="answer1">Answer one</div>  
<div class="answer2 hidden">Answer two</div>

<div class="faqquestion">Question Three?</div>  
<div class="answer1">Answer one</div>  
<div class="answer2 hidden">Answer two</div>

jQuery

$().ready(function () {
    $("div.faqquestion").click(function () {
        $(this).next("div.answer1").toggle().next("div.answer2").toggle();
     });
});