0

質問をクリックすると、ある 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>
4

2 に答える 2

2

実際にはリンクを使用していないため、使用する本当の理由はありません<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();
     });
});
于 2011-04-01T11:49:06.743 に答える
1

jQueryで答えを出すことができれば、jQueryのnext（）関数を介して最も近いものに移動できます。

したがって、jQuery（ "elementSel"）。next（ "div"）;を探す必要があります。

単純なJavaScriptでは、HTMLのグリムスペが正確な答えを見つけるのに役立つdomトラバーサルメソッドを探す必要があります。

于 2011-04-01T11:07:45.033 に答える