Reset Image Gallery Count When Loading New Article Content-CodePudding

I have a lots of articles that have 1, 2, 3 or 4 pictures. On mobile I created a carousel. All images all on the same line and I have a count that is 0. And when I press on the right button(for example) that count it will be -100 and all images will have a left: -100 and so on. The problem is that, let's say, I press on the button from one article that count will be -100. but after I go to another article and if I press again the count is not -100 and is -200. How can I reset that count when I change the article. The code is something like:

 var c = 0;
$('.plus').on('click', function(){
    c  = 100
    $(this).siblings('.num').text(c)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >Minu</div>
  <div >Plus
  </div><div >0</div>
</div>
<div >
  <div >Minu2</div>
  <div >Plus2
  </div><div >0</div>
</div>
<div >
  <div >Minu3</div>
  <div >Plus3
  </div><div >0</div>
</div>
<div >
  <div >Minu4</div>
  <div >Plus4
  </div><div >0</div>
</div>
<div >
  <div >Minu5</div>
  <div >Plus5
  </div><div >0</div>
</div>

CodePudding user response：

Add an on('click', function() {...}) handler to your "change the article" button. If this button is just another article's text, then give them all a common class and a common class onclick handler.

HTML...

<span >Article 1</span>
<span >Article 2</span>
<span >Article 3</span>

jQuery...

$('.article').on('click', function() {
    c = 0;
});

CodePudding user response：

Here's what I cooked up for you.

$('.plus').on('click', function(){
    c = Number($(this).siblings('.num').text())   100;
    $(this).siblings('.num').text(c)
});

$('.minus').on('click', function(){
    c = Number($(this).siblings('.num').text()) - 100;
    $(this).siblings('.num').text(c)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >Minu</div>
  <div >Plus</div>
  <div >0</div>
</div>
<div >
  <div >Minu2</div>
  <div >Plus2</div>
  <div >0</div>
</div>
<div >
  <div >Minu3</div>
  <div >Plus3</div>
  <div >0</div>
</div>
<div >
  <div >Minu4</div>
  <div >Plus4</div>
  <div >0</div>
</div>
<div >
  <div >Minu5</div>
  <div >Plus5</div>
  <div >0</div>
</div>

The Plus button will add to the total displayed for the current article and Minus will subtract from it. Every article has it's own c value that can't be changed by a button from a different article.

I hope that's what you are looking for.