用标题属性 onclick 替换 span 文本答案

【问题标题】：Replace span text with title attribute onclick用标题属性 onclick 替换 span 文本
【发布时间】：2011-04-19 13:55:52
【问题描述】：

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

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

【问题讨论】：

标签： jquery replace caption

【解决方案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>

然后您将获得对被点击的确切拇指的引用。

【讨论】：

好的，我有点明白你的意思，但我对javascript很陌生，你认为你能给我一个如何重写脚本的例子吗？非常感谢！
越来越近 :) 使 span 标签保持在原位，但现在文本始终相同，我如何让它更新为已单击的拇指？有多个缩略图。
我已更新代码以传递将引用缩略图图像元素的“this”。

【解决方案2】：

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

【讨论】：

嗯，点击任何缩略图后仍然会消失。

【解决方案3】：

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

【讨论】：