如何将img alt附加到li

时间:2010-10-26 22:17:00

标签: jquery html

嘿伙计们,我再说一遍,我知道我刚才问了类似的东西,但我需要的功能略有不同,这次我有一个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>

1 个答案:

答案 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,而不管点击哪个图片。“