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

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

如果你看一下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('<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>

3 个解决方案

#1

why don't you change

你为什么不改变

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

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

like you did a few lines higher ?

就像你做了几行更高?

#2

While I see you've already accepted an answer, this approach seems to work pretty well:

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

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

JS小提琴演示。

References:

#3

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

try this example, a bit cleaner. For the next step i`ve better wrap it in for no js users.

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

#1