0

1 ページに 5 つの UL があります。そのため、1 つの画像にマウスを合わせると、UL のすべてのインスタンスで同じ効果が実行されます (つまり、5 つの出現箇所すべての HTML が変更されます)。

個々の UL でスクリプトを実行して、すべてではなく、マウスをホバーしたそれぞれの UL で効果が実行されるようにします。

ライブコード例: http://jsfiddle.net/5FPSc/

前もって感謝します。ヘルプ/ポインタは非常に役立ちます。/ GSA

HTML :

<ul class="answerOptions">
    <li data-score="0" data-answer="A" class="answer-1">
      <figure><img src="assets/images/styles/quiz/ques2_A.jpg" alt="" title="" />
        <figcaption>Dinner and a movie</figcaption>
      </figure>
    </li>
    <li data-score="1" data-answer="B" class="answer-2">
      <figure><img src="assets/images/styles/quiz/ques2_B.jpg" alt="" title="" />
        <figcaption>2 words: Laser Tag</figcaption>
      </figure>
    </li>
    <li data-score="0" data-answer="C" class="answer-3">
      <figure><img src="assets/images/styles/quiz/ques2_C.jpg" alt="" title="" />
        <figcaption>Stroll through the park and a picnic</figcaption>
      </figure>
    </li>
    <li data-score="0" data-answer="D" class="answer-4">
      <figure><img src="assets/images/styles/quiz/ques2_D.jpg" alt="" title="" />
        <figcaption>Skydiving</figcaption>
      </figure>
    </li>
    <li data-score="4" data-answer="E" class="answer-5">
      <figure><img src="assets/images/styles/quiz/ques2_E.jpg" alt="" title="" />
        <figcaption>Art gallery and wine tasting</figcaption>
      </figure>
     </li>
</ul>
    <div class="answerItem-1"></div>

脚本 ：

$('.answerOptions figure').hover(function(){
    $(".answerItem-1").html($(this).find("figcaption").html());
},function(){
if($('figure').hasClass('selected') != true){
    $(".answerItem-1").html("");
}
else {
      $(".answerItem-1").html($("figure.selected").find("figcaption").html());
}
}); 
$('.answerOptions figure').click(function(){    
    $('figure').removeClass('selected');
    $(this).addClass("selected");   
    $(".answerItem-1").html($(this).find("figcaption").html());
});
4

3 に答える 3

0

それらがすべて「ポップアップ」している理由は、次の行のためです。$(".answerItem-1")あなたは EACH と every.answerItem-1を選択していて、それらの束があります。一意の識別子を設定する必要があります。私はこのようなことをします：

<figure rel="q1">
...
<div id="q1" class="answerItem-1"></div>

//jquery code
var q = $(this).attr('rel');  
$('#'+q).html($(this).find("figcaption").html());

http://jsfiddle.net/5FPSc/4/

于 2012-05-16T06:16:19.897 に答える
0

LIタグに独自のイベントハンドラーを持たせるという客観的な概念を使用する必要があると思います。以下のスクリプトを見て、コードの参考にしてください。

$('ul.answerOptions').delegate('li.answer-1', 'hover', function(event) {

    if (event.type == 'mouseenter') {
        console.log('inbound');
        var $target = $(this).parents('div.question').find('div.answerItem-1');
        var showText = '';
        showText = $(this).find('figcaption').html();
        $target.html(showText);
    } else if (event.type == 'mouseleave') {
        var $target = $(this).parents('div.question').find('div.answerItem-1');
        $target.html('');
    }
});​
于 2012-05-16T06:31:06.753 に答える
0

クラスを使用せず、ID を使用します。クラス ホバー効果はすべてのアイテムで実行されます。ID はページ上で 1 つだけです。

于 2012-05-16T06:14:04.003 に答える