[英]Mouse Hover effect runs on each item
我在單個頁面上出現了5次UL。 因此,當我將鼠標懸停在一個圖像上時,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());
});
不要使用類,請使用ID。 類懸停效果在所有項目上運行,id只能是頁面上的一個。
它們全部“彈出”的原因是由於以下這一行: $(".answerItem-1")
您正在選擇EACH和每個.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());
我認為您應該使用客觀的概念,使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('');
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.