1

Такая дилемма. Сделал слайдер, всё работает хорошо кроме одного момента: если нажимать на одну картинку 2 раза то большая версия исчезает совсем. Я полагаю что prepend() не срабатывает.

$('.laast img').each(function(){
            var oldImg = $(this).attr('src'); 
            var ext= /(\.\w{3,4}$)/;
            var newImg = oldImg.replace(ext,'_q$1');
            var newI= $('<img src="'+newImg+'">');
        $(this).click(function(){
            newI.hide();
         $('.big').prepend(newI);
            newI.fadeIn(1000);
            $('.big img:last').fadeOut(1000,function(){
                $(this).remove();
            });
        });
        
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="laast">
    <p>Заголовок заголовок</p>
    <img src="image/small/blue.jpg" alt=""> 
    <img src="image/small/green.jpg" alt=""> 
    <img src="image/small/orange.jpg" alt=""> 
    <img src="image/small/purple.jpg" alt=""> 
    <img src="image/small/red.jpg" alt=""> 
    <img src="image/small/slide1.jpg" alt=""> 
    <div class="big">
        <img src="image/small/blue_q.jpg" alt="" class="q2">
        
    </div>
    </div>

5
  • Вам не нужен цикл. Перепишите код, используя $('.laast > img').click(function() { ... });
    – user176262
    20 янв 2017 в 21:56
  • Цикл чтоб заранее путь загрузить для кеша чтоб не зависала
    – PeGaS
    20 янв 2017 в 21:59
  • "на одну картинку 2 раза то большая версия исчезает" - потому что newI и $('.big img:last') соответствуют одному и тому же DOM-элементу.
    – user176262
    20 янв 2017 в 22:00
  • @Igor Но ведь когда срабатывает prepend() он уже не ".big img:last" там по идее должно быть 2 эемента
    – PeGaS
    20 янв 2017 в 22:02
  • см. ответ ниже.
    – user176262
    20 янв 2017 в 22:07

1 ответ 1

2

prepend, конечно, срабатывает.

"на одну картинку 2 раза то большая версия исчезает" - потому что newI и $('.big img:last') соответствуют одному и тому же DOM-элементу. То есть новый DOM-элемент не добавляется, он уже существует внутри jQuery-евской обертки, и Ваш код добавляет его к его же собственному родителю.

if (newI[0] != $('.big img:last')[0]) {
  $('.big img:last').fadeOut(1000,function(){
    $(this).remove();
  });
}

или

$('.big img:last').not(newI).fadeOut(1000,function(){
  $(this).remove();
});
2
  • Да, спасибо. Я условный оператор буду использовать. Помогло
    – PeGaS
    20 янв 2017 в 22:17
  • Но цикл я применил не зря? чтоб заранее путь загрузить для картинки и не зависало ничего.
    – PeGaS
    20 янв 2017 в 22:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.