从 alt 标记中提取值 - 需要在单击 Jquery 时更改答案

【问题标题】：Pulling value from alt tag - need it to change on click Jquery从 alt 标记中提取值 - 需要在单击 Jquery 时更改
【发布时间】：2012-03-08 22:37:07
【问题描述】：

好的 - 所以我制作了一个小图片库 - 基本上，当您单击缩略图时，它会从 alt 标签中提取标题 - 将其放入 div 中以作为标题显示在图片下方，并显示图片作为全屏背景

我要做的是在页面加载时显示此标题 - 当您单击时，删除现有值并将其替换为新值

当前标题在页面加载时未显示，当您单击它时 - 它会根据需要显示标题，但是当您单击另一个图像时它不会删除此标题

这是我现有的代码

    <ul id="horses">
                <li><a class="clicker" rel="drawings-bg"><img src="/assets/img/portfolio/horse.jpg" alt="horse" /></a></li>
                <li><a class="clicker" rel="contact-bg"><img src="/assets/img/portfolio/dogs.jpg" alt="dogs" /></a></li>
                <li><a class="clicker" rel="drawings-bg"><img src="/assets/img/portfolio/horse.jpg" alt="horse" /></a></li>
    </ul>

jQuery

     $(document).ready(function() {
    var imginfo = $('.imgtitle');
$("ul#horses li img").click(function() {
      if(imginfo)  $(imginfo).siblings('.imgtitle').remove();
$(this).parent().append("<div class=imgtitle>" + $(this).attr("alt") + "</div>");
     });
});

提前致谢

【问题讨论】：

您的 imginfo var 有一个未分配给任何元素的类的选择器是否正常？我没有看到任何带有名为 imgtitle 的类的元素
然后发生了什么？你有错误吗？没有什么？沃尔多戴着他的小帽子突然出现在您的页面上？
我不明白这个问题。你想在标题中显示什么？
是的，waldo 弹出来时吓到我了——它会在点击时加载 alt 标签，但是当你点击另一张图片时它不会删除它——也不会在页面加载时显示
@AntiFaith：不删除我在回答中提到的以前的问题。您的代码中没有任何内容会在页面加载时显示标题。

标签： jquery attributes tags alt

【解决方案1】：

大部分似乎都有效：

这行有问题：

if(imginfo)  $(imginfo).siblings('.imgtitle').remove();

jQuery 实例总是真实的，所以该行将始终运行。但是，忽略这一点，不应该更像这样吗？

$(document).ready(function() {
  var imginfo = $('.imgtitle');
  $("ul#horses li img").click(function() {
    $('ul#horses li .imgtitle').remove();
    $(this).parent().append(
      "<div class=imgtitle>" + $(this).attr("alt") + "</div>"
    );
  });
});

...如果您在显示新标题时尝试删除其他标题：http://jsbin.com/iqugih

【讨论】：

请注意 - 仍然有同样的问题 - 页面加载时不加载，点击另一个元素时不删除
@AntiFaith：太好了，很高兴有帮助！
叹气 - 现在在页面加载时开始出现问题 - 非常头痛的 atm，为客户完成了一天的构建 - 任何指针？

【解决方案2】：

试试这个：

$("ul#horses li img").click(function() {
    var i = $(this);
    var imageTitle = i.parent().find('.imgtitle');
    if(null === imageTitle || imageTitle.length == 0) {
        imageTitle = $('<div/>').addClass('imgtitle');
        i.parent().append(imageTitle);
    }

    imageTitle.html(i.attr('alt'));
});

【讨论】：

它可以工作，但它的工作方式与我目前的工作方式相同 - 在页面加载时不显示标题 - 当您单击它时不会删除以前的标题