Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как добавить Product4 и Product5 в скрипт? (https://javascript.ru/forum/dom-window/84752-kak-dobavit-product4-i-product5-v-skript.html)

sochi-russia 07.12.2022 20:51

Как добавить 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 в скрипт?
Заранее спасибо большое, с уважением.

voraa 07.12.2022 21:28

Как то так
$(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--;
        }
    });     
})


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

sochi-russia 07.12.2022 21:42

Цитата:

Сообщение от voraa (Сообщение 549294)
Как то так
$(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--;
        }
    });     
})


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

Спасибо огромнейшее!!!


Часовой пояс GMT +3, время: 01:00.