Like counter with JS / Jquery?

Navigation
3

I have several cards in one page and each card has a tanned option of facebook, when I click on the image the counter increases by 1, but it counts on all the cards and not only on what I clicked and also every time I I would like a user to click on it aumenta um if they click it again diminui um equal facebook like dislike .

Here is an example of what I have today 

var count = 0;

$(".click").click(function() {
  count++;
  $(".click").css('opacity', "0.7");
  $(".like").html(count + "Curtidas");
  $(this).off(event);
});
.click {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li class='click'>Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

<div>
  <ul>
    <li class='click'>Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

<div>
  <ul>
    <li class='click'>Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>
    
asked by anonymous 05.01.2016 / 13:04

2 answers

2

In event click use this to get only the element that was clicked. To manipulate the item that is just below, in this case li with class like use next . The way you did $(".like") was manipulating the value for all items with that class. 

$(this).next().html(count + " Curtidas");

Also to "save" the amount of tanned in each item, use the data- * attribute, with this will be able to recover and increase the total of likes. 

<li class='click' data-like-count="0">Clique</li>

See the example working: 

$(".click").on('click', function() {
  var count = parseInt($(this).attr("data-like-count"));
  count++;
  $(this).css('opacity', "0.7");
  $(this).next().html(count + " Curtidas");
  $(this).off(event);
  $(this).attr("data-like-count", count);
});
.click {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><ul><liclass='click'data-like-count="0">Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

<div>
  <ul>
    <li class='click' data-like-count="0">Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

<div>
  <ul>
    <li class='click' data-like-count="0">Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>
    
05.01.2016 / 13:27
3

The problem is that you are missing the reference to the button you are clicking. This $(".like").html(count + "Curtidas"); will get all elements with class .like .

For your code to work you will have to use $(this) as a reference. And for the purpose of returning to 0 just do an if.

Follow the example: 

$(function() {
    $('.like').on('click', function() {
        $(this).next('.likes').find('span').text(function() {
            if (parseInt($(this).text()) === 0) {
                return parseInt($(this).text() + 1);
            }
            else {
                return 0;
            }
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><ul><li><pclass="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt architecto aut eligendi saepe nihil, officiis officia, est! Deserunt cupiditate voluptate necessitatibus. Aspernatur, vitae earum atque hic maxime facere sequi sint!</p>
      <button class="like">Curtir</button>
      <span class="likes"><span>0</span> curtidas</span>
    </li>
  </ul>
</div>

@Edit:

The problem is that you need to save this in some database, you will not be able to do it with just JS. Updating the page will lose all data.

The most consistent is to do a back-end validation and work with AJAX requests to enter this data.

There you verify the identity of the user and if he has already voted, if you have already voted, return 0 to increase, otherwise increase by 1 more.

    
05.01.2016 / 13:19
How to get the full size of the screen even though the browser window is resized? Get the $ index of an ng-repeat that contains an ng-controller in $ scope in AngularJS