嘿伙计们,我再说一遍,我知道我刚才问了类似的东西,但我需要的功能略有不同,这次我有一个ul元素,img标签嵌入标签内。我需要的是当单击图像以填充li元素,但是单击下一个或最后一个图像时我需要填充更新内容的相同li元素。请在下面找到html。提前谢谢。
<div class="filter">
<div class="heading" id="activityLevel">
<p><a href="#">Activity Level</a></p>
<a href="#" target="_self">modify</a>
</div>
<div class="add-filters" id="addActivityLevel">
<div class="inner">
<a href="#" class="btn-close"></a>
<h4 class="title-filtery">Filtery By:</h4>
<ul class="activity-level">
<li><a href="#"><img src="../images/shore-excursions/btn-activity-level-easy.gif" alt="Activity Level Easy" /></a></li>
<li><a href="#"><img src="../images/shore-excursions/btn-activity-level-moderal.gif" alt="Activity Level Moderate" /></a></li>
<li class="last"><a href="#"><img src="../images/shore-excursions/btn-activity-level-extreme.gif" alt="Activity Level Extreme" /></a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. iaculis in magna. In ut dolor a lacus adipiscing molestie.</p>
<div class="btn-holder clearfix">
<input type="button" class="btn-cancel" value="" />
<input type="button" class="btn-update" value="" />
</div>
</div>
</div><!-- filters -->
<div class="hidden-filters" id="hiddenActivityLevel">
<p>Filtering by:</p>
<ul></ul>
</div>
</div>
答案 0 :(得分:2)
$(document).ready(
function(){
$('img').click(
function(){
if ($('#hiddenActivityLevel ul li:first').length) {
$('#hiddenActivityLevel ul li:first').text($(this).attr('alt'));
}
else {
$('<li />').appendTo('#hiddenActivityLevel ul').text($(this).attr('alt'));
}
return false;
}
)
}
);
有几点指示:
这会对每个图像元素的点击作出反应,return false
专门用于a
标记内的图像;但你最好按类或父母(例如$('ul li a img')
)来指定缩小受影响元素的范围。
在上文中,选择器$('hiddenActivityLevel ul li:first')
仅用于选择一个 li
,但您可以使用eq()
来实现相同的目标(示例:$('hiddenActivityLevel ul li').eq(3)
将选择第四个li
,JS数组从零开始,请记住。)
我希望强烈建议您在您希望填充的特定id
上放置li
并让它在DOM中加载,而不是而不是在飞行中创建它。
我不太清楚你的意思:
但是点击下一个或最后一个图像我需要填充更新内容的相同li元素。
但我认为'我希望使用点击图片的li
文字更新相同alt
,而不管点击哪个图片。“