0

わかりました-小さな画像ギャラリーを作成しました-基本的にサムネイルをクリックすると、altタグからタイトルが取り込まれます-divに配置され、画像の下にタイトルとして表示され、画像がフルスクリーンで表示されますBG

私がやろうとしているのは、ページの読み込み時にこのタイトルを表示することです。クリックすると、既存の値が削除され、新しい値に置き換えられます

現在、ページの読み込み時にタイトルをクリックしても表示されません - 希望どおりにタイトルが表示されますが、別の画像をクリックしてもこのタイトルは削除されません

Heres私の既存のコード

    <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>

Jクエリ

     $(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 インスタンスは常に true であるため、その行は常に実行されます。しかし、それを無視して、もっとこのようにすべきではないでしょうか?

$(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 に答える