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 是大图像容器，第二个将作为一系列缩略图重复。

4

3 回答 3

1

您的“obj”包含跨度。并且您正在使用 obj.innerHTML 覆盖您的跨度。因此，您没有跨度。

你可以更新已经存在的 img 元素，或者你可以找到它并删除它，然后附加你的新图像标签而不是覆盖整个画廊容器。

编辑：

为每个 img 元素添加一个 id。我用拇指和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

Try using $('span').innerHTML = title instead.

于 2011-04-19T13:59:15.980 回答
0

尝试使用$('span').prop('title', 'Title Here!');

于 2019-10-07T08:55:31.797 回答