把jquery變成一個包含可調用函數

Question

我很沮喪！作爲一名好的PHP開發人員，我無法擺脫jQuery問題的困擾！

我最近把我的HTML jquery包括到了HTML body的末尾，而不是在頭部來提高谷歌pagespeed得分。

這打破了一些用於簡單評論投票的jquery。這寫得很糟糕，因爲它重複每一個評論。

<div id="voterow-19907" class="commentfooter">UP</a> | <a id="comment-vote-down-19907" href="#" rel="nofollow">DOWN</a></div> 


    <script> 
    $("#comment-vote-up-19907").click(function() { 
     $.ajax({ 
      type: "GET", 
      url: "/ajax.php", 
      data: "a=rv&v=19907&d=up", 
      success: function(data){ 
       $("#voterow-19907").text("Thank you for your vote") 
      } 
     }); 
     return false;     
    }); 

    $("#comment-vote-down-19907").click(function() { 
     $.ajax({ 
      type: "GET", 
      url: "/ajax.php", 
      data: "a=rv&v=19907&d=down", 
      success: function(data){ 
       $("#voterow-19907").text("Thank you for your vote") 
      } 
     }); 
     return false;     
    }); 
    </script> 

由於移動jquery包括到頁面的底部，這自然不起作用。

我想要做的是將上面的代碼轉換爲一個迷你函數，我可以在jquery包含後包含，然後將ID和VOTE-DIRECTION從HTML使用jQuery數據屬性的hrefs傳遞給函數。

任何幫助將不勝感激。我沒頭髮了！

Answer 1

我認爲，重複代碼會傷害你的頁面而不是放置JQuery文件。

您可以使用更一般的事件偵聽器來解決此問題。刪除代碼中的所有聽衆（全部）並在Jquery包含後追加下面的代碼。

$('[id^=comment-vote]').click(function() { 
    var elementId = $(this).attr('id'); 
    var elementIdParts = elementId.split("-"); 
    var voteType = elementIdParts[2]; 
    var id = elementIdParts[3]; 
    $.ajax({ 
     type: "GET", 
     url: "/ajax.php", 
     data: "a=rv&v="+id+"&d="+voteType, 
     success: function(data){ 
      $("#voterow-"+id).text("Thank you for your vote") 
     } 
    }); 
    return false;     
}); 

$('[id^=comment-vote]")選擇id爲「comment-vote」開頭的所有元素。如果用戶點擊其中一個元素，事件處理程序會獲取元素的id，並將其分解爲諸如「comment」，「vote」，「up」，「19900」等部分。第二部分是voteType，第三部分是行的ID。我們可以在生成/操作AJAX請求時使用這些變量。

我沒有嘗試代碼，但背後的想法會對你有益。

Answer 2

要真正給出一個很好的工作答案，我需要看到你的一個示例頁面/你的html的確切結構，但這裏是我對你的。

在一個腳本文件，你的jQuery後包括，您可以包括類似於下面的代碼假設你的HTML是如下的內容：

<div id="voterow-1" class="voterow"> 
    <p class="voteresult"></p> 
    <a class="upvote" href="#" rel="nofollow">UP</a> 
    <a class="downvote" href="#" rel="nofollow">DOWN</a> 
</div> 
<div id="voterow-2" class="voterow"> 
    <p class="voteresult"></p> 
    <a class="upvote" href="#" rel="nofollow">UP</a> 
    <a class="downvote" href="#" rel="nofollow">DOWN</a> 
</div> 

具有類給予好評和downvote的可以很容易地針對這些在jQuery的元素：

// After jQuery is loaded, the function passed to ready() will be called 
$(document).ready(function() { 
    // bind a click event to every direct child with the upvote class of an element with the voterow class 
    $('.voterow > .upvote').click(function (event) { 
     // get the voterow parent element 
     var $parent = $(event.target).parent(); 
     // use regex to strip the id number from the id attribute of the parent 
     var id = parseInt($parent.attr('id').match(/^voterow-(\d+)/)[1]); 
     // call your ajax function 
     vote(id, 'up', $parent.find('.voteresult'); 
    }); 

    $('.voterow > .downvote').click(function (event) { 
     var $parent = $(event.target).parent(); 
     var id = parseInt($parent.attr('id').match(/^voterow-(\d+)/)[1]); 
     vote(id, 'down', $parent.find('.voteresult'); 
    }); 

    function vote(id, direction, $resultElement) { 
     $.ajax({ 
      type: "GET", 
      url: "/ajax.php", 
      // here we have the id and the direction needed to make the ajax call 
      data: "a=rv&v=" + id + "&d=" + direction, 
      success: function(data){ 
       $resultElement.text("Thank you for your vote") 
      } 
     }); 
    } 
}); 

這裏是一個演示：https://plnkr.co/edit/ECL376hZ3NOz8pBVpBMW?p=preview