IMG縮略圖單擊以縮略圖標題

Question

JSFIDDLE HERE

替換格文本值如果你看看JS撥弄你會發現點擊thumbail藏漢改變圖像爲.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('<div class="presentouter"><img src="' + imgsrc + '" class="presentimg"/><div class="currentimgtitle" title="' + imgtitle + '">' + imgtitle + '</div></div>'); 
}); 
$(".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); 
}); 
}); 
<div class="imgcontainer"> 
    <div class="minicontainer"> 
    <img src="http://lh3.googleusercontent.com/_Zuzii37VUO4/Ta0nUeMwXoI/AAAAAAAAFoc/7f0Um7OTgNg/s000/Antartic-by-Peter-Rejcek.jpg" title="icy mountains" class="miniimg"/> 
    <img src="http://lh3.googleusercontent.com/_Zuzii37VUO4/Ta0nUFUhg6I/AAAAAAAAFoY/GToUxRYcteY/s000/Antartic-by-Kelly-Speelman.jpg" title="icy planes and hills" class="miniimg2"/> 
    <img src="http://lh4.googleusercontent.com/_Zuzii37VUO4/Ta0nTs8AbPI/AAAAAAAAFoU/zCvNKv4kfe4/s000/BeachWaves-By-RePublicDomain.jpg" title="sun rise with clouds" class="miniimg3"/> 
    </div> 
</div> 

<div class="imgcontainer"> 
    <div class="minicontainer"> 
    <img src="http://3.bp.blogspot.com/-EyJOI3UFWvo/Te5KHGgOpSI/AAAAAAAAESY/PhG66jWB1OA/s200/blogger-featured-slideshow.png" title="Blogger Logo" class="miniimg"/> 
    <img src="http://2.bp.blogspot.com/-BKPnpE6QpfY/TewL7Q16ipI/AAAAAAAAERg/pxn6NY1nNsg/s640/best-blogger-template-stunning-slider-magazine.PNG" title="blogger template" class="miniimg2"/> 
    <img src="http://4.bp.blogspot.com/-gxaZr19LXtY/TdRcJrxv3gI/AAAAAAAAD68/KaX9UN0B2nE/s640/advanced-design-magazine-blogger-template.PNG" title="another blogger template" class="miniimg3"/> 
    </div> 
</div> 

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 Fiddle demo。

參考文獻：

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

Answer 3

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

嘗試這個例子，有點清潔。對於下一步，我最好把它包裝進去，不要讓js用戶使用。