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代碼返回新值，然後在成功處理程序中應用該值。