img缩略图单击用缩略图标题替换div文本值

JSFIDDLE在这里

如果你看一下js小提琴，你会发现点击缩略图改变了图像以及.currentimgtitle文本值，但它改变了页面上所有.currentimgtitle文本值，当我只想更改与jquery和html相关的那个时。下面

 $(".imgcontainer").each(function() { var imgsrc = $(".minicontainer img:first-child", this).attr("src"); var imgtitle = $(".minicontainer img:first-child", this).attr("title"); $(this).append('
' + imgtitle + '
'); }); $(".miniimg, .miniimg2, .miniimg3").click(function() { var miniimgrc = $(this).attr("src"), $presentImg = $(this).closest(".imgcontainer").find(".presentimg"); $presentImg.attr('src', miniimgrc); }); $(".miniimg, .miniimg2, .miniimg3").click(function(index) { var miniimgtitle = $(this).attr("title"), $presentTitle = $(this).closest(".imgcontainer").find(".currentimgtitle"); $presentTitle.attr('title', miniimgtitle); }); $(".imgcontainer").each(function(index) { $(".miniimg, .miniimg2, .miniimg3").click(function() { var textval = $(this).attr("title"); $(".currentimgtitle").text(textval); }); }); 
 
    
 
 
 
    
  

Answer 1

你为什么不改变

 $(".currentimgtitle").text(textval); 

至

 $(this).closest(".imgcontainer").find(".currentimgtitle").text(textval); 

就像你做了几行更高？

Answer 2

虽然我看到你已经接受了答案，但这种方法看起来效果很好：

 $('.minicontainer img').click( function(){ var miniImgSrc = this.src, imgTitle = this.title, $container = $(this).closest('.imgcontainer'); $container .find('.presentimg') .attr('src',miniImgSrc); $container .find('.currentimgtitle') .attr('title',imgTitle) .text(imgTitle); }); 

JS小提琴演示 。

参考文献：

• attr() 。
• .closest() 。
• find() 。
• text() 。
• element.title 。

Answer 3

http://jsfiddle.net/T3J3r/36/

试试这个例子，有点清洁。 对于下一步，我最好将其包装进去，以便没有js用户。