Question

我试图实现类似于stackoverflow的投票系统，我有类似的东西：

HTML：

<div id="answer_595" class="answer">
  <img src="vote_up.png" class="vote up">
  <div class="score">0</div>
  <img src="vote_down.png" class="vote down">
  Blah blah blah this is my answer.
</div>

<div id="answer_596" class="answer">
  <img src="vote_up.png" class="vote up">
  <div class="score">0</div>
  <img src="vote_down.png" class="vote down">
  Blah blah blah this is my other answer.
</div>

Jquery的：

$(function() {
    $('div.answer img.vote').click(function() {
        var id = $(this).parents('div.answer').attr('id').split('_')[1];
        var vote_type = $(this).hasClass('up') ? 'up' : 'down';
        if($(this).hasClass('selected')) {
            $.post('/vote/', {id: id, type: vote_type}, function(json) {
                if(json.success == 'success') {
                    $('#answer_' + id)
                     .find('img.' + vote_type)
                     .attr('src', 'vote_' + vote_type + '_selected.png')
                     .addClass('selected');
                    $('div.score', '#answer_' + id).html(json.score);
                }
            });
        } else {
            $.post('/remove_vote/', {id: id, type: vote_type}, function(json) {
                if(json.success == 'success') {
                    $('#answer_' + id)
                     .find('img.' + vote_type);
                     .attr('src', 'vote_' + vote_type + '.png')
                     .removeClass('selected');
                    $('div.score', '#answer_' + id).html(json.score);
                }
            });                
        }
    });
});

图像无法点击。怎么来的？

由于

Answer 1

你的支票似乎倒退了，你有：

if($(this).hasClass('selected')) {

这（至少似乎是）检查已经是否有投票，所以应该反过来检查代码的其余部分...目前你会调用{{1在第一次点击时（当没有投票时，至少没有那个方向），所以就这样做：

/remove_vote/

此外，需要考虑的是，由于您已经点击了if(!$(this).hasClass('selected')) {，因此您可以保留对它的引用，无需再次找到它，如下所示：

<img>

此外，对于有多个答案的案例，最好使用.delegate()，将其替换为：

$(function() {
  $('div.answer img.vote').click(function() {
    var id = $(this).closest('div.answer').attr('id').split('_').pop(),
      vote_type = $(this).hasClass('up') ? 'up' : 'down',
      self = this;
    if(!$(this).hasClass('selected')) {
      $.post('/vote/', {id: id, type: vote_type}, function(json) {
        if(json.success == 'success') {
          self.src = 'vote_' + vote_type + '_selected.png';
          $(self).addClass('selected').siblings('div.score').html(json.score);
        } else { alert("Oh @#$% gremlins!"); }
      });
    } else {
      $.post('/remove_vote/', {id: id, type: vote_type}, function(json) {
        if(json.success == 'success') {
          self.src = 'vote_' + vote_type + '.png';
          $(self).removeClass('selected').siblings('div.score').html(json.score);
        } else { alert("Oh @#$% gremlins!"); }
      });                
    }
  });
});

有了这个：

$('div.answer img.vote').click(function() {

jquery投票系统图像不可点击

1 个答案: