javascript - 在切换按钮 [Upvote/Downvote/unvote like SO] 之间的中心查找元素

Question

如何在toggleClass之间找到这个元素。这是我到目前为止尝试过的。这是我的 JSFIDDLE http://jsfiddle.net/8rrctstf/12/

我应该得到元素 vote_count。

HTML

<div class="pull-right">
    <a class="vote upvote" data-product_id="12" href="#">
        <span class="fa fa-thumbs-up"></span>
    </a>
    <span class="vote_count">100</span>
    <!-- FIND THIS -->
    <a class="vote downvote" data-product_id="12" href="#">
        <span class="fa fa-thumbs-down"></span>
    </a>
</div>

JQUERY

$('.vote').click(function (e) {
    e.preventDefault();
    var product_id = $(this).data('product_id');

    alert($(this).next().text()); // TRIED SO FAR

    $(this).siblings('a.vote').removeClass('active');
    $(this).toggleClass('active');

    if (!$(this).hasClass('active')) {
        // alert(product_id + ' :unvote');
        $.get("{{ URL::route('unvote') }}", {
            product_id: product_id
        }).done(function (data) {
            console.log(data);
        });
    } else {
        if ($(this).hasClass('upvote')) {
            // alert(product_id + ' :upvote');
            $.get("{{ URL::route('upvote') }}", {
                product_id: product_id
            }).done(function (data) {
                console.log(data);
            });
        } else {
            // alert(product_id + ' :downvote');
            $.get("{{ URL::route('downvote') }}", {
                product_id: product_id
            }).done(function (data) {
                console.log(data);
            });
        }
    }
});

编辑如何做增量(+1)，减量(-1)，重置(0)

编辑2我的回答是因为 js 的这种增量似乎很难。

$('.vote').click(function (e) {
    e.preventDefault();
    var product_id = $(this).data('product_id');

    var voteCount = $(this).siblings('.vote_count');

    $(this).siblings('a.vote').removeClass('active');
    $(this).toggleClass('active');

    if (!$(this).hasClass('active')) {
        // alert(product_id + ' :unvote');
        $.get("{{ URL::route('unvote') }}", {
            product_id: product_id
        }).done(function (data) {
            voteCount.text(data[0].vote_count);
        });
    } else {
        if ($(this).hasClass('upvote')) {
            // alert(product_id + ' :upvote');
            $.get("{{ URL::route('upvote') }}", {
                product_id: product_id
            }).done(function (data) {
                voteCount.text(data[0].vote_count);
            });
        } else {
            // alert(product_id + ' :downvote');
            $.get("{{ URL::route('downvote') }}", {
                product_id: product_id
            }).done(function (data) {
                voteCount.text(data[0].vote_count);
            });
        }
    }
});

Answer 1

你可以使用siblings方法

$(this).siblings('.vote_count')

Updated Fiddle

$('.vote').click(function(e) {
  e.preventDefault();
  // Cache votecount element jQuery object
  var $voteCount = $(this).siblings('.vote_count');

  // Get the votes count
  var count = +$voteCount.text();

  $(this).toggleClass('active');

  if (!$(this).hasClass('active')) {
    // When unvoting, if previous vote is upvote then decrement it by one
    // If previous vote is downvote then increment it by one
    $voteCount.text($(this).hasClass('upvote') ? --count : ++count);
  } else {
    if ($(this).siblings('a.vote').hasClass('active')) {
      $voteCount.text($(this).siblings('a.active').hasClass('upvote') ? count - 2 : count + 2);
    } else if ($(this).hasClass('upvote')) {
      // Increase vote count by one
      $voteCount.text(++count);
    } else {
      // Decrease vote count by one
      $voteCount.text(--count);
    }
  }
  $(this).siblings('a.vote').removeClass('active');

});

.vote {
  color: Black;
}
.active.upvote {
  color: green;
}
.active.downvote {
  color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
  <a class="vote upvote" data-product_id="12" href="#">
    <span class="fa fa-thumbs-up"></span>
  </a>
  <span class="vote_count">100</span> 
  <a class="vote downvote" data-product_id="12" href="#">
    <span class="fa fa-thumbs-down"></span>
  </a>
</div>