Dear professionals. I myself recently started learning jQuery, I had such a problem. Here I downloaded the finished gallery, on the back of 5 blocks (14 in total), on the right and left of the button for changing blocks. In total there are 14 blocks (goods). I added below, 4 blocks separately (Category)

{Block_1 Block_2 Block_3 Block_4}

The first 5 products belong to the 1st category ( Блок_1 ), the following 4 products of the 2nd category ( Блок_2 ), the following 3 products to the 3rd category ( Блок_3 ). The following 2 products to the 4th category ( Блок_4 ). Blocks are simply highlighted. Here is my HTML code:

 <ul> <li><div class="news-text"><p>!1!Text</p></div></li> <li><div class="news-text"><p>!2!Text</p></div></li> <li><div class="news-text"><p>!3!Text</p></div></li> <li><div class="news-text"><p>!4!Text</p></div></li> <li><div class="news-text"><p>!5!Text</p></div></li> <li><div class="news-text"><p>!6!Text</p></div></li> <li><div class="news-text"><p>!7!Text</p></div></li> <li><div class="news-text"><p>!8!Text</p></div></li> <li><div class="news-text"><p>!9!Text</p></div></li> <li><div class="news-text"><p>!10!Text</p></div></li> <li><div class="news-text"><p>!11!Text</p></div></li> <li><div class="news-text"><p>!12!Text</p></div></li> <li><div class="news-text"><p>!13!Text</p></div></li> <li><div class="news-text"><p>!14!Text</p></div></li> </ul> </div> <div class="buttom_block"> <ul> <li class="item1"> 1_блок </li> <li class="item2"> 2_блок </li> <li class="item3"> 3_блок </li> <li class="item4"> 4_блок </li> </ul> </div>

Js file What I added:

 var index = 1; function next_button(index,current){ if (index <= 4) $('.item1').addClass("class"); if (index == 5) { $('.item1').removeClass("class"); $('.item2').addClass("class"); } if (index == 9) { $('.item2').removeClass("class"); $('.item3').addClass("class"); } if (index == 12) { $('.item3').removeClass("class"); $('.item4').addClass("class"); } if (index == 14) { $('.item4').removeClass("class"); $('.item1').addClass("class"); } } function prev_button(index){ if (index >= 13 && index <= 14) $('.item4').addClass("class"); if (index >= 10 && index <= 12){ $('.item4').removeClass("class"); $('.item3').addClass("class"); } if (index >= 6 && index <= 9){ $('.item3').removeClass("class"); $('.item2').addClass("class"); } if (index >= 1 && index <= 5){ $('.item2').removeClass("class"); $('.item1').addClass("class"); } if (index==14) $('.item1').removeClass("class"); }

This I added to the buttons themselves. For Next :

 next_button(index,current); index++; if (index>14) index= index-14;

For Prev :

 index--; if (index==0) index = index+14; prev_button(index);

How to make it possible to add an arbitrary number of products (for example, if you add a few more products to block 1)? That is, so that you can specify in the HTML file which product belongs to which block. I hope someone will respond to my problem. I would be very grateful for any useful information. Thanks in advance!

  • It is possible to store an amount of elements on each page an array, and the data for if-ov to take from it. - metazet

1 answer 1

You can do this, for example: When creating a div, specify the id attribute for it, and let it be, for example, if the product belongs to the first group, the id starts with the character a , if the product comes from the second group - the id starts with the character b , etc. The code will be something like this:

 <ul> //товары первой группы <li><div class="news-text" id=a1><p>!1!Text</p></div></li> <li><div class="news-text" id=a2><p>!2!Text</p></div></li> <li><div class="news-text" id=a3><p>!3!Text</p></div></li> <li><div class="news-text" id=a4><p>!4!Text</p></div></li> //товары второй группы <li><div class="news-text" id=b1><p>!5!Text</p></div></li> <li><div class="news-text" id=b2><p>!6!Text</p></div></li> <li><div class="news-text" id=b3><p>!7!Text</p></div></li> </ul>

Then, instead of checking which index has a given element, you will need to check which name has this element, and if this name starts with the letter a , then you can definitely say that the product belongs to the first group. Similarly, if the element name begins with the letter b , then you know for sure that the product belongs to the second group, etc.

As a result, if you have only 4 groups of goods, then you will have only 4 conditions if

There is another way to solve this problem. You all have the same class, and what if you create 4 classes - for each group its own. Then you need to check not the indices, but whether the given element has a certain class.

  • function next_button (index, kol) {$ ("# buttom_block ul"). children (). css ('background', '# 666'); $ ('#' + $ ('li'). eq (index-1) .attr ('class')). css ('background', '# 3f4078'); if (index == kol + 1) {$ ('#' + $ ("# buttom_block ul li: last"). attr ('id')). css ('background', '# 666'); $ ('# 1'). Css ('background', '# 3F4078'); }} - murad30
  • function prev_button (index, kol) {$ ("# buttom_block ul"). children (). css ('background', '# 666'); $ ('#' + $ ('li'). eq (index-1) .attr ('class')). css ('background', '# 3f4078'); if (index == kol) {$ ('# 1'). css ('background', '# 666666'); $ ('#' + $ ("# buttom_block ul li: last"). attr ('id')). css ('background', '# 3f4078'); }} - murad30
  • this is the event itself: next_button (index + 1, kol); <br> index ++; <br> if (index> = kol) index = index-kol; <br> <br> index--; <br> if (index == 0) index = index + kol; <br> prev_button (index, kol); - murad30