Question

我已经设置了一个脚本，可以在单击缩略图时更改大图像。它还成功更改了title属性。我希望它采用该title属性并使用文本填充span标记。它在页面加载时有效，但是当您单击任何缩略图时，跨度消失。任何帮助将非常感激。

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

Answer 1

你的'obj'包含范围。你正在使用覆盖你的跨度的obj.innerHTML。因此，你没有跨度。

您可以更新已经存在的img元素，也可以找到并删除它，然后附加新的图片代码，而不是覆盖整个gallerycontainer。

编辑：

为每个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>

然后您将获得所点击的确切拇指的参考。

Answer 2

请尝试使用$('span').innerHTML = title。

Answer 3

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

用标题属性onclick替换span文本

3 个答案: