好的我有这段HTML,它在页面上出现几次,它总是在结构上相同,但链接和链接文本每次都会与列表文本不同。
<ul>
<li class="n1">Understand key issues relating to creating animations for interactive media products</li>
<li class="n2">Understand key contextual information relating to creating 2D animations for interactive media products</li>
<li class="n3">Be able to create 2D animations for use as part of an interactive media product</li>
<li class="n4">Be able to liaise with relevant parties</li>
<li class="n5">Be able to store 2D animations for use as part of an interactive media product</li>
</ul>
<hr />
<a href="alcohol_calculator.php" class="swfselector">
» Alcohol unit calculator prototype <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /><img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="bouncing_ball.php" class="swfselector">
» Bouncing ball animation <img class="tab" src="/images/3.png" width="30" height="28" alt="3" />
</a>
<a href="FOCC_mnemonic.php" class="swfselector">
» FOCC mnemonic <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> <img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="information_literacy_quiz.php" class="swfselector">
» Information literacy quiz <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> <img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="traffic_lights.php" class="swfselector">
» Traffic lights <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> <img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
我正在使用这段Jquery在mousedover时更改每个swfselector链接中的图像:
$(document).ready(function() {
$('.swfselector').find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace(".png", "o.png"));
})
});
$('.swfselector').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
$(this).find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace("o.png", ".png"));
})
} else {
$(this).find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace(".png", "o.png"));
})
}
});
到目前为止这一切都有效...但是现在我有了一块Jquery,它试图改变上面相应的
$(document).ready(function() {
$('.swfselector').find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace(".png", "o.png"));
})
});
$('.swfselector').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
$(this).find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace("o.png", ".png"));
var srcString = $(this).attr("src").substr(0, $(this).attr("src").length - 4);
nameString = srcString.substr(8, srcString.length - 1);
$(this).closest('ul').find('li').each(function() {
var className = $(this).attr('class');
if (nameString.indexOf(className)) {
$(this).removeClass(className).addClass(className + 'o');
}
})
})
} else {
$(this).find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace(".png", "o.png"));
})
}
});
上面的代码没有返回任何错误,但是没有做我想要的。
答案 0 :(得分:1)
$(this).closest('ul').find('li').each(function() {
$(this)似乎是指'.swfselector',通过使用最近的,你正在搜索祖先。但UL不是'.swfselector'的祖先
编辑:
而不是$(this).closest('ul')你应该这样做:
$('ul').find('li').each(function() {....
甚至更好,给你'ul'一个id
$('#myUL').find('li').each(function() {