将 span 文本替换为 title 属性 onclick

发布于 2024-11-02 13:44:44 字数 1027 浏览 4 评论 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 是大图像容器，第二个将作为一系列缩略图重复。

原文

I've got a script set up that changes a large image when a thumbnail is clicked. It also changes the title attribute successfully. I'd like it to take that title attribute and populate a span tag with the text. It works when the page loads, but when you click any of the thumbnails, the span disappears. Any help would be much appreciated.

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

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

The first div is the large image container, the second would be repeated as a series of thumbnails.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

囚你心 2024-11-09 13:44:44

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

您可以更新已有的 img 元素，也可以找到它并删除它，然后附加新的图像标签，而不是覆盖整个图库容器。

编辑：

为每个 img 元素添加一个 id。我用了拇指和完整图像。然后：

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>

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

Your 'obj' contains the span.
and you are using obj.innerHTML which is overwriting your span. therefore, you have no span.

you can either update the img element that is already there, or you can find it and remove it, then append your new image tag instead of overwriting the entire gallerycontainer.

EDIT:

Add an id to each of the img elements. i used thumb and fullImage. then:

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

Edit links to pass 'this'(ignore my image paths):

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

Then you will have a reference to the exact thumb that was clicked.

回复收藏 0 原文