jQuery的：更改图片src和一流的onclick

Question

的jQuery：

$(".upvote").click(function() { 
    var id = $(this).attr('id'); 

    var changeImage = ($(this).children('img').attr('src') === siteUrl + '/images/icon-upvote.png') 
        ? siteUrl + '/images/icon-upvote-inactive.png' 
        : siteUrl + '/images/icon-upvote.png'; 
    $(this).children('img').attr('src', changeImage); 

    var changeClass = ($(this).children('img').attr('src') === siteUrl + '/images/icon-upvote.png') 
        ? 'vote-icon' 
        : 'vote-icon semi-transparent-more'; 
    $(this).children('img').attr('class', changeClass); 

    $.ajax({ 
     type: 'GET', 
     data: 'comic=' + id + '&type=upvote', 
     url: siteUrl + '/vote.php', 
     success: function() { 
      // PHP does all checks 
     } 
    }); 
}); 

HTML：

<div> 
    <a href="vote.php?comic=$fileName&amp;type=upvote" id="$fileName" class="upvote$guestLink" onclick="return false;">$upvoteImage</a> 
</div> 
<div style="margin: 5px 0 8px 0;"> 
    <span class="score$scoreStyle bold" id="$fileName">$fileScore</span> 
</div> 
<div> 
    <a href="vote.php?comic=$fileName&amp;type=downvote" class="downvote$guestLink">$downvoteImage</a> 
</div> 

这是我已经有了和它的作品真的很好。问题是我知道有一种方法可以让我的效率比我的效率高一点。

另外，如何选择该跨度以更改其值？我将如何根据目前设置的内容调整价值？我一直在这个问题上苦苦挣扎，时间最长。

Answer 1

$(".upvote").click(function() { 
    var id = this.id, 
     $img = $(this).children('img'), 
     changeImage, 
     changeClass; 

    if ($img.attr('src') === siteUrl + '/images/icon-upvote.png') { 
     changeImage = siteUrl + '/images/icon-upvote-inactive.png'; 
     changeClass = 'vote-icon'; 
    } else { 
     changeImage = siteUrl + '/images/icon-upvote.png'; 
     changeClass = 'vote-icon semi-transparent-more'; 
    } 

    $img.attr({'src' : changeImage, 
       'class' : changeClass }); 

    $.ajax({ 
     type: 'GET', 
     data: 'comic=' + id + '&type=upvote', 
     url: siteUrl + '/vote.php', 
     success: function() { 
      // PHP does all checks 
     } 
    }); 
}); 

我改变什么：

1. 设置id变量：鉴于在功能this是的DOM元素，你可以说this.id，而不是直接与$(this).attr('id')
创建一个jQuery对象
2. 缓存你的主要jQuery对象：而不是重复$(this).children('img')（我为此创建了一个变量$img）。
3. 添加了一个i f/else：三元运算符?在一般意义上很好，但是您使用了两次（一次用于changeImage，一次用于changeClass）以评估相同的条件。对我来说，在if中评估一次这种情况更有意义，然后设置这两个变量。
4. 更改属性：您曾拨打.attr()两次，但您可以将它传递给属性映射并一次性更改它们。

另外，如何选择该跨度以更改其值？我将如何根据目前设置的内容调整价值？

那么这将是一个比较容易选择，如果它是同一div为上下锚元素的孩子，但是，无论如何，你的结构可能是这样的：

// within the click handler for the upvote: 
var $score = $(this).parent().next().find("span"); 
// or within the handler for the downvote: 
var $score = $(this).parent().prev().find("span"); 

注此外，你已经给出了这个跨度与上面的anchor元素的id相同的id--这使得你的html无效，因为id在页面上应该是唯一的。我认为你不能通过id选择，因为你在页面上有多个投票元素。

至于设定值，以获得在JS的当前值和增量：

$score.html(function(i, oldHTML) { 
    return +oldHTML + 1; 
}); 

传递一个回调.html()的语法为您提供了与旧值的参数，然后返回新值设置。所以+oldHTML将字符串转换为一个数字 - 显然我假设这里的span包含一个数字 - 除此之外再加一个。

但是，我认为在使用来自服务器的数据的ajax成功处理程序中这样做会更好：让PHP代码返回新值，然后在成功处理程序中应用该值。