img thumbnail点击替换div文本值与缩略图标题 [英] img thumbnail click replace div text value with thumbnail title

问题描述

JSFIDDLE这里

如果你看看js fiddle你会发现点击缩略图更改图像以及 .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 =currentimgtitletitle ='+ 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）。每个函数（索引）{
 $（。miniimg，.miniimg2，.miniimg3 $（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-P​​eter-Rejcek.jpgtitle =icy mountainsclass =miniimg /> 
< img src =http://lh3.googleusercontent.com/_Zuzii37VUO4/Ta0nUFUhg6I/AAAAAAAAFoY/GToUxRYcteY/s000/Antartic-by-Kelly-Speelman.jpgtitle =冰面和山丘class = miniimg2/> 
< img src =http://lh4.googleusercontent.com/_Zuzii37VUO4/Ta0nTs8AbPI/AAAAAAAAFoU/zCvNKv4kfe4/s000/BeachWaves-By-RePublicDomain.jpgtitle =sun rise with cloudsclass =miniimg3 /> 
< / div> 
< / div> 
 
< div class =imgcontainer> 
< div class =minicontainer> 
< img src =http://3.bp.blogspot.com/-EyJOI3UFWvo/Te5KHGgOpSI/AAAAAAAAESY/PhG66jWB1OA/s200/blogger-featured-slideshow.pngtitle =Blogger Logoclass = miniimg/> 
< img src =http://2.bp.blogspot.com/-BKPnpE6QpfY/TewL7Q16ipI/AAAAAAAAERg/pxn6NY1nNsg/s640/best-blogger-template-stunning-slider-magazine.PNGtitle = blogger templateclass =miniimg2/> 
< img src =http://4.bp.blogspot.com/-gxaZr19LXtY/TdRcJrxv3gI/AAAAAAAAD68/KaX9UN0B2nE/s640/advanced-design-magazine-blogger-template.PNGtitle =其他博主templateclass =miniimg3/> 
< / div> 
< / div> 
  




解决方案

为什么不更改

  $（。currentimgtitle）。text（textval）; 
  

到

  $（this）.closest（。imgcontainer）。find（。currentimgtitle）。text（textval）;就像你做了几行更高一些？
 
  




JSFIDDLE HERE

If you look at the js fiddle you will find clicking the thumbail changes the image aswell as the .currentimgtitle text value but it changes all .currentimgtitle text values on the page when i only want to change the one relevant to it the jquery and html are below

$(".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>

解决方案

why don't you change

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

to

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

like you did a few lines higher ?

这篇关于img thumbnail点击替换div文本值与缩略图标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！