Reset Image Gallery Count When Loading New Article Content

Admin 1
Viewed 71

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 class="article">
  <div class="minus">Minu</div>
  <div class="plus">Plus
  </div><div class="num">0</div>
</div>
<div class="article">
  <div class="minus">Minu2</div>
  <div class="plus">Plus2
  </div><div class="num">0</div>
</div>
<div class="article">
  <div class="minus">Minu3</div>
  <div class="plus">Plus3
  </div><div class="num">0</div>
</div>
<div class="article">
  <div class="minus">Minu4</div>
  <div class="plus">Plus4
  </div><div class="num">0</div>
</div>
<div class="article">
  <div class="minus">Minu5</div>
  <div class="plus">Plus5
  </div><div class="num">0</div>
</div>

jquery javascript
2 Answers

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 class="article">Article 1</span>
<span class="article">Article 2</span>
<span class="article">Article 3</span>

jQuery...

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

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 class="article">
  <div class="minus">Minu</div>
  <div class="plus">Plus</div>
  <div class="num">0</div>
</div>
<div class="article">
  <div class="minus">Minu2</div>
  <div class="plus">Plus2</div>
  <div class="num">0</div>
</div>
<div class="article">
  <div class="minus">Minu3</div>
  <div class="plus">Plus3</div>
  <div class="num">0</div>
</div>
<div class="article">
  <div class="minus">Minu4</div>
  <div class="plus">Plus4</div>
  <div class="num">0</div>
</div>
<div class="article">
  <div class="minus">Minu5</div>
  <div class="plus">Plus5</div>
  <div class="num">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.

user_85007180
Related