0

サムネイルがクリックされたときに大きな画像を変更するスクリプトをセットアップしました。また、タイトル属性も正常に変更されます。そのタイトル属性を取得して、スパンタグにテキストを入力したいと思います。ページが読み込まれると機能しますが、サムネイルのいずれかをクリックすると、スパンが消えます。どんな助けでも大歓迎です。

 function changeIt(imageName,titleCaption,objName){
var obj = document.getElementById(objName);
var imgTag = "<img src='"+imageName+"' border='0' title='"+titleCaption+"' />";
obj.innerHTML = imgTag;
var title = $("img").attr("title");
  $("span").text(title);
return;  
}

そしてhtml

    <div id="gallerycontainer" style="height:530px;width:940px;">
<img src="http://foo.com/image/thumbnail.jpg" border="0" width="940" height="530" title="caption" />
<span id="gallerycaption">caption</span>
</div>


 <div class="workplease">
<a href="javascript:;" onclick="changeIt('http://foo.com/image/large.jpg','caption','gallerycontainer');">
<img src="http://foo.com/image/thumbnail.jpg" border="0" width="190" height="106" alt="{title}" title="caption" />
</a>
</div>

最初の div は大きな画像コンテナーで、2 番目は一連のサムネイルとして繰り返されます。

4

3 に答える 3

1

'obj'にはスパンが含まれています。スパンを上書きしているobj.innerHTMLを使用しています。したがって、スパンはありません。

すでに存在するimg要素を更新するか、それを見つけて削除してから、gallerycontainer全体を上書きする代わりに新しい画像タグを追加することができます。

編集：

各img要素にIDを追加します。私はthumbとfullImageを使用しました。それから：

function changeIt(imageName,titleCaption,objName, link){
    var thumb = $(link).find('img');
    $('#fullImage').attr('src', imageName);
    var title = thumb.attr('title');
    $("#gallerycaption").text(title);
    return;  
}

'this'を渡すためにリンクを編集します（私の画像パスを無視します）：

    <a href="javascript:;" onclick="changeIt('../images/2.png','caption','gallerycontainer', this);">
        <img id="thumb" src="../images/2.png" border="0" width="190" height="106" alt="{title}" title="caption2" />
    </a>

次に、クリックされた正確な親指への参照があります。

于 2011-04-19T14:06:44.033 に答える
0

$('span').innerHTML = title代わりに使用してみてください。

于 2011-04-19T13:59:15.980 に答える