изменяющие Конкретный Текст с JQuery

Question

Вот мой HTML/PHP:

<p> 
    <span data-good="<?php echo $row['good']; ?>" data-wasVoted="<?php echo $row['wasVoted']; ?>" data-review="<?php echo $row['review_id']; ?>" class="upvote">Votes (<span class="good"><?php echo $row['good']; ?></span>)</span> 
</p> 

Это выглядит как беспорядок, я извиняюсь, но это тестовый код.

Для пользователя это будет выглядеть следующим образом на выходе:

Votes (3) // 3 is just an example number. 

Это будет кликабельна. Я хочу, чтобы пользователь щелкнул по нему, и если они уже проголосовали за это, 3 становится 2. Если они этого не сделали, 3 становится 4. Это определяется атрибутом data-wasVoted. Это 1, если они есть и 0, если они этого не сделали. (будет стиль, чтобы пользователь мог определить, есть ли у них поддержка или нет).

Отправка этой информации на сервер и получение необходимого, что мне нужно, все настроено. Я просто не могу найти хороший способ захватить нужное число, так как это зацикленный список сгенерированного HTML. Таким образом, есть строка динамических кнопок голосования.

Вот мой JQuery:

var review_id = $(this).data('review'); 
var was_voted = $(this).data('wasVoted'); 
var vote_total = $(this).data('good'); 

var new_text = $('.good'); 


$.ajax({ 
     url : "php/reviews_upvote.php", 
     type : "POST", 
     dataType : "json", 
     data : { 
      reviewId : review_id 
     }, 
     success : function(data) { 

      if (was_voted == 1) { 
       vote_total = vote_total - 1; 
       new_text.text(vote_total); 
      } else { 
       vote_total = vote_total + 1; 
       new_text.text(vote_total); 
      } 

     } 
    }); 

Первая проблема, очевидно, вар new_text. Он основан на class, который повторяется снова и снова. Поэтому, если вы нажмете один, на странице будут изменены ВСЕ номера голосов, а не только тот, с которым вы имеете дело. Как я могу определить уникальный атрибут того, который мне нужен?

Вторая проблема; поскольку пользователь может голосовать только один - мне нужно динамически изменять was_voted вар 0, если это было 1 или 1, если он был 0.

EDIT: Добавлены HTML оказанного после php называется.

<span data-good="2" data-wasvoted="1" data-review="2582" class="upvote"> 
    Votes (<span class="good">2</span>) 
</span> 

data-good - всего голосов.

Answer 1

Если логика обрабатывается внутри события click.

1-ая проблема - Используйте это, чтобы нацелить элемент.

второй Проблемы - Используйте тот же контекст для изменения атрибутов данных

var $this = $(this), 
    review_id = $this.data('review'), 
    was_voted = $this.data('wasVoted'), 
    vote_total = $this.data('good'), 

    new_text = $('.good'); 

$.ajax({ 
     url : "php/reviews_upvote.php", 
     type : "POST", 
     dataType : "json", 
     data : { 
      reviewId : review_id 
     }, 
     success : function(data) { 

      if (was_voted == 1) { 
       vote_total = vote_total - 1; 
       $this.data('wasVoted', 0); 
      } else { 
       vote_total = vote_total + 1; 
       $this.data('wasVoted', 1); 
      } 
      $this.find('.good').text(vote_total); 

     } 
    });