JQuery при щелчке по миниатюре заменяет второй img src на миниатюру src

JSFIDDLE ЗДЕСЬ При нажатии .miniimg/2/3 он должен заменить src img с классом .presentimg, который я добавил с помощью jquery к div .imgcontainer, я прошел через jQuery (НИЖЕ HTML) и единственная причина, по которой я думаю, что это не сработает, потому что я использовал функцию внутри функции, и я не знаю альтернативы метод

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

jquery, в jquery я использую (index) для внешней функции .each, как я видел это на форуме, но я не знаю, действительно ли это работает, к сожалению

$(".imgcontainer").each(function(){
    var imgsrc = $(".minicontainer img:first-child").attr("src");
    $(this).append('<img src="'+imgsrc+'" class="presentimg"/>');
});
$(".miniimg").each(function(index){
    var $this = $(this);
    $(this).click(function(){
        var miniimgrc = $this.attr("src");
        $(".presentimg").atrr('src', miniimgrc);
    });
});
$(".miniimg2").each(function(index){
    var $this = $(this);
    $(this).click(function(){
        var miniimgrc2 = $this.attr("src");
        $(".presentimg").atrr('src', miniimgrc2);
    });
});
$(".miniimg3").each(function(index){
    var $this = $(this);
    $(this).click(function(){
        var miniimgrc3 = $this.attr("src");
        $(".presentimg").atrr('src', miniimgrc3);
    });
});

javascript image jquery each src
person Fiddler    schedule 01.01.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле, я думаю, ваша проблема в том, что у вас есть несколько ошибок в написании attr:

$(".presentimg").atrr('src', miniimgrc3);

должно быть:

$(".presentimg").attr('src', miniimgrc3);

Обновленная скрипта: http://jsfiddle.net/nv9em/

Кроме того, вы можете сократить свой код до одного обработчика событий:

$(".imgcontainer").each(function() {
    var imgsrc = $(".minicontainer img:first-child").attr("src");
    $(this).append('<img src="' + imgsrc + '" class="presentimg"/>');
});

$(".miniimg, .miniimg2, .miniimg3").click(function() {
    var miniimgrc = $(this).attr("src");
    $(".presentimg").attr('src', miniimgrc);
});

Обновленная скрипта: http://jsfiddle.net/Fr5yW/

person Andrew Whitaker    schedule 01.01.2012
comment
Ну, это неловко :/ извините. - person Fiddler; 02.01.2012
comment
@Fiddler: Нет проблем, иногда требуется вторая пара глаз :). У меня есть предложение, как сделать все короче - person Andrew Whitaker; 02.01.2012
comment
большое спасибо, но у меня есть другая проблема, я пытался использовать каждый, но, похоже, он не работает jsfiddle.net/nv9em/1 - person Fiddler; 02.01.2012
comment
@Fiddler: вам нужно определить правильный img.presentImg на основе маленького img, который был нажат: jsfiddle.net/aFNjV - person Andrew Whitaker; 02.01.2012
comment
есть ли способ избежать того, чтобы .presentimg для каждого контейнера .img имел тот же src, что и .miniimg на странице - person Fiddler; 02.01.2012
comment
@Fiddler: Хм, я не совсем понимаю, что ты имеешь в виду. - person Andrew Whitaker; 02.01.2012
comment
если вы посмотрите на результат на jsfiddle, добавленные imgs с классами .presentimg имеют одинаковое значение src, НО первый .miniimg src отличается для обоих div .minicontainer - person Fiddler; 02.01.2012
comment
Не могли бы вы помочь мне с заменой значения заголовка .currentimgtitle на заголовок миниатюры, по которой щелкнули, я довольно много обновлял его с тех пор, как раньше jsfiddle.net/Plugins4/T3J3r/14 - person Fiddler; 02.01.2012
comment
@Fiddler: я бы порекомендовал задать новый вопрос на этом этапе, просто чтобы вопросы и ответы не попадали в комментарии к этому ответу. - person Andrew Whitaker; 02.01.2012
comment
stackoverflow.com/questions/8696306 / - person Fiddler; 02.01.2012