0

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

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

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

这是我现有的代码

    <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>");
     });
});

提前致谢

4

2 回答 2

1

试试这个：

$("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'));
});
于 2012-03-08T14:34:28.027 回答
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

于 2012-03-08T14:36:05.607 回答