img thumbnail click заменить текстовое значение div на заголовок миниатюры - PullRequest
Новая
       20

img thumbnail click заменить текстовое значение div на заголовок миниатюры

3 голосов
/ 02 января 2012

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-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 ]

3 голосов
/ 02 января 2012

Хотя я вижу, что вы уже приняли ответ, этот подход, кажется, работает довольно хорошо: 

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

Ссылки:

2 голосов
/ 02 января 2012

почему бы вам не изменить 

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

на 

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

, как вы сделали на несколько строк выше?

1 голос
/ 02 января 2012

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

попробуйте этот пример, немного чище.Для следующего шага лучше обернуть его без пользователей js.

...