Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.12.2022, 20:51
Интересующийся
Отправить личное сообщение для sochi-russia Посмотреть профиль Найти все сообщения от sochi-russia
 
Регистрация: 24.11.2014
Сообщений: 23

Как добавить Product4 и Product5 в скрипт?
Здравствуйте
Есть скрипт
$(document).ready(function(){
    counter = 2; // for product 2
    
    $(".next").click(function(){
        if(counter == 1)
        {
            $(".product1").fadeOut(500);
            $(".product2").fadeIn(500);
            $(".h1").animate({top:"-30%"});
            $(".h2").animate({top:"50%"});
            counter = 2;
        }
        else if(counter == 2)
        {
            $(".product2").fadeOut(500);
            $(".product3").fadeIn(500);
            $(".h2").animate({top:"-30%"});
            $(".h3").animate({top:"50%"});
            counter = 3;
        }
    });
    
    $(".pre").click(function(){
        if(counter == 2)
        {
            $(".product2").fadeOut(500);
            $(".product1").fadeIn(500);
            $(".h1").animate({top:"50%"});
            $(".h2").animate({top:"130%"});
            counter = 1;
        }
        else if(counter == 3)
        {
            $(".product3").fadeOut(500);
            $(".product2").fadeIn(500);
            $(".h2").animate({top:"50%"});
            $(".h3").animate({top:"130%"});
            counter = 2;
        }
    });      
});



Как правильно добавить product4 и product5 в скрипт?
Заранее спасибо большое, с уважением.
Ответить с цитированием
  #2 (permalink)  
Старый 07.12.2022, 21:28
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,746

Как то так
$(document).ready(function(){
	const numproducts = 5
    let counter = 2; // for product 2
     
    $(".next").click(function(){
        if(counter < numproducts)
        {
            $(`.product${counter}`).fadeOut(500);
            $(`.product${counter+1}`).fadeIn(500);
            $(`.h${counter}`).animate({top:"-30%"});
            $(`.h${counter+1}`).animate({top:"50%"});
            counter ++;
        }
    });
     
    $(".pre").click(function(){
        if(counter > 1)
        {
            $(`.product${counter}`).fadeOut(500);
            $(`.product${counter-1}`).fadeIn(500);
            $(`.h${counter-1}`).animate({top:"50%"});
            $(`.h${counter}`).animate({top:"130%"});
            counter--;
        }
    });     
})


Но вообще это извращение каждому элементу давать класс с номером

Последний раз редактировалось voraa, 07.12.2022 в 21:38.
Ответить с цитированием
  #3 (permalink)  
Старый 07.12.2022, 21:42
Интересующийся
Отправить личное сообщение для sochi-russia Посмотреть профиль Найти все сообщения от sochi-russia
 
Регистрация: 24.11.2014
Сообщений: 23

Сообщение от voraa Посмотреть сообщение
Как то так
$(document).ready(function(){
	const numproducts = 5
    let counter = 2; // for product 2
     
    $(".next").click(function(){
        if(counter < numproducts)
        {
            $(`.product${counter}`).fadeOut(500);
            $(`.product${counter+1}`).fadeIn(500);
            $(`.h${counter}`).animate({top:"-30%"});
            $(`.h${counter+1}`).animate({top:"50%"});
            counter ++;
        }
    });
     
    $(".pre").click(function(){
        if(counter > 1)
        {
            $(`.product${counter}`).fadeOut(500);
            $(`.product${counter-1}`).fadeIn(500);
            $(`.h${counter-1}`).animate({top:"50%"});
            $(`.h${counter}`).animate({top:"130%"});
            counter--;
        }
    });     
})


Но вообще это извращение каждому элементу давать класс с номером
Спасибо огромнейшее!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обратный отсчет на js как добавить 0 при значении от 0 до 9 kovalenko3331 Общие вопросы Javascript 2 08.04.2016 08:59
как добавить еще один селектор foxfor jQuery 1 29.05.2015 12:32
Скрипт сворачиваемых блоков, как доработать? varik Общие вопросы Javascript 0 25.10.2012 10:00
не работает скрипт как ссылка Abraham jQuery 31 14.06.2011 03:04
А как зделать скрипт, чтобы например скрипт 1 заменялся скриптом 2? yura371 Общие вопросы Javascript 3 06.01.2009 22:40