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