javascript - 具有特定类的最近 div

Question

我有一个脚本可以在您单击问题时将一个 div 与另一个 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();
     });
});

Answer 2

如果我可以在 jQuery 中给出答案，您可以通过 jQuery 中的 next() 函数找到最接近的答案。

所以你必须寻找 jQuery("elementSel").next("div");

在简单的 javascript 中，您将不得不寻找 dom 遍历方法，一瞥您的 html 可以帮助找到确切的答案。