изменение изображения src attr

Question

Ищите какое-то направление с этим.

На этой текущей итерации у меня есть она, где, если пользователь нажимает на миниатюру изображения, уменьшенное изображение отображается в другом div (главный div), и при этом он перезаписывает главный div img src attr * обновить: с эскизом img attr минус «-крайба». Эта часть хорошая, или, по крайней мере, я считаю, что это так.

С учетом сказанного, после того, как пользователь нажимает на миниатюру и появляется главный div img, он задерживается ... и то, что я имею в виду под завязками, это то, что, например, если пользователь закрывает div и повторно открывает его или другой div, как и он, последнее изображение показывает (остается), когда оно не должно находиться в главном div. Вместо этого он должен показывать первый эскиз img в главном div ...

Любые предложения приветствуются, а ниже - то, что у меня есть (или, по крайней мере, его часть). Существует намного больше, но ниже - основной материал, который дает мне проблемы ...

* update: HTML-часть находится в классе div, называемом «t_1». У меня 24 из этих ... "t_1", "t_2", "t_3" соответственно. И в этом классе у меня есть то, что опубликовано ниже, используя все те же классы div. Единственное различие - имена папок в теге img.

Итак, когда пользователь нажимает на эту миниатюру, и это уменьшенное изображение переписывается, так что оно может отображаться в главном div «t_main_screenshot», все хорошо ... но тогда, если пользователь щелкает из " t_1 "и т. д. divs, и открывает еще один« t_2 », последний миниатюру изображения, который был нажат ранее, отображается в главном div (t_main_screenshot) вместо первого значка изображения для того, что должно быть в« t_2 »...

Надеюсь, это немного лучше в ясности ... Это трудно объяснить.

HTML:

<div class="t_main_screenshot"> 
    <img src="_framework/images/slides/simplicity/2.png" alt="" title="" /> 
</div> 

<div class="t_thumbnail_wrapper"> 
    <div class="t_thumbnail active"> 
     <img src="_framework/images/slides/simplicity/2-thumbnail.png" alt="" title="" /> 
    </div> 
    <div class="t_thumbnail"> 
     <img src="_framework/images/slides/simplicity/4-thumbnail.png" alt="" title="" /> 
    </div> 
    <div class="t_thumbnail"> 
     <img src="_framework/images/slides/simplicity/6-thumbnail.png" alt="" title="" /> 
    </div> 
</div> 

JS/JQuery:

$('.t_thumbnail').click(function() { 
    $('.t_thumbnail').removeClass('active'); 
    $(this).addClass('active'); 

    var thumbNail = $(this).find('img').attr('src'); 

    $('.t_main_screenshot img').fadeOut(0, function() { 
     $(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = thumbNail.replace('-thumbnail', ''); 
    }); 
}); 

Answer 1

Наконец понял, ответ на этот вопрос:

$('.t_thumbnail').click(function() { 
    $('.t_thumbnail').removeClass('active'); 
    $(this).addClass('active'); 

    var thumbNail = $(this).find('img').attr('src'); 

    $(this).parent().parent().siblings().find('.t_main_screenshot').children('img').fadeOut(0, function() { 
     $(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = thumbNail.replace('-thumbnail', ''); 
    }); 
}); 

Answer 2

Ваш вопрос не ясен, но я думаю, что вы имеете в виду, когда пользователь щелкает два раза так быстро, вы увидите вспышку ...

Это потому, что вы используете .fadeOut() и .fadeIn()

Так, чтобы исправить эту проблему, вы можете использовать .stop() метод, чтобы остановить предыдущую анимацию, прежде чем начать новый один

Подробнее: https://api.jquery.com/stop/

---

По обновлениям вопрос

здесь является проблема: $('.t_main_screenshot img').fadeOut(0, function() {

Вы должны выбрать ближайшие t_main_screenshot

Правильный путь:

$(this).closest('.t_thumbnail_wrapper') 
     .siblings('.t_main_screenshot') 
     .find('img').fadeOut(0 

Позвольте мне знать, если это работает ...

Answer 3

$('.t_thumbnail').click(function() { 
    $('.t_thumbnail').removeClass('active'); 
    $(this).addClass('active'); 

    var thumbNail = $(this).find('img').attr('src'); 
    var res = thumbNail.substring(1, thumbNail.indexOf("-")); 
    res+=".jpg"; 

    $('.t_main_screenshot img').fadeOut(0, function() { 
     $(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = res; 
    }); 
});