img 缩略图单击用缩略图标题替换 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="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-P​​eter-Rejcek.jpg" title="冰山" class="miniimg"/><img src="http://lh3.googleusercontent.com/_Zuzii37VUO4/Ta0nUFUhg6I/AAAAAAAFoY/GToUxRYcteY/s000/Antartic-by-Kelly-Speelman.jpg" title="冰冷的飞机和山丘" class="miniimg2"/><img src="http://lh4.googleusercontent.com/_Zuzii37VUO4/Ta0nTs8AbPI/AAAAAAAFoU/zCvNKv4kfe4/s000/BeachWaves-By-RePublicDomain.jpg" title="旭日东升" class="miniimg3"/>

<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="博客模板"类="miniimg2"/><img src="http://4.bp.blogspot.com/-gxaZr19LXtY/TdRcJrxv3gI/AAAAAAAAD68/KaX9UN0B2nE/s640/advanced-design-magazine-blogger-template.PNG" title="另一个博主模板" class="miniimg3"/>

解决方案

你为什么不改变

$(".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 缩略图单击用缩略图标题替换 div 文本值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！