將jquery函數鏈接到PHP查詢結果

使用PHP我正在檢索視頻列表。我正在使用jquery在疊加層中顯示視頻。我有一切工作，但問題是實施的方法似乎對我有點蠻力，我正在尋找一種方法來削減冗餘代碼。將jquery函數鏈接到PHP查詢結果

基本上我從數據庫中獲得視頻列表，並使用foreach循環將其輸出到屏幕。我用的ID的視頻，使像鏈接ID爲每個結果獨特：

<a id=like<?php echo $video['fileID'] ?>" ...

我接下來要jQuery的加入到循環的每個迭代。如果顯示其是通過對視頻，當前用戶等信息Ajax調用當前用戶的票的視頻，然後jQuery的AJAX調用函數和一個新的投票：

//upVote for a discussion 
    $('#like<?php echo $video['fileID'] ?>').click(function(){ 
    $.ajax({ 
     type:"POST", 
     url:'/ajax/likeFile.php', 
     data:"voter=" + <?php echo (isset($_SESSION['user_id']) ? $_SESSION['user_id'] : ''); ?> 
     + "&poster=" + <?php echo $video['userID'] ?> 
     + "&classID=" + <?php echo $_SESSION['class'] ?> 
     + "&lessonID=" + <?php echo $_SESSION['lesson'] ?> 
     + "&id=" + <?php echo $video['fileID'] ?> 
     + "&type=like", 
     success: function(data) { 
     var $response=$(data); 
     var votes = $response.filter('#voteCount').text(); 
     $('#fileVotes').text(votes); 
     $('#like').attr('src', '/images/upvoteDisabled.png'); 
     $('#unlike').attr('src', '/images/downvote.png'); 
     } 

    }); 
    });

就像我說，這工作正常。問題是，我想減少重複jQuery的每個鏈接反覆。有沒有一種方法可以調用它，只是讓選中的項目通過它的當前循環迭代變量而不是爲每個鏈接創建一個jquery函數？

這是一個非常複雜的問題，我知道。預先感謝任何想解決這個問題的人。

來源

2011-07-22 simpiligno

我假設代碼輸出這隻出現一次在你的實際的PHP代碼，對不對？如果是這樣，通過製作某種JavaScript函數輸出代碼，除了極少量的帶寬之外，你實際上不會去拯救自己。 – Mike

首先，設置一個HTML5 DOCTYPE，因此您可以採取的custom data attributes優勢：

<!DOCTYPE HTML>

然後讓PHP填充每個錨您的數據屬性：

<a class="like-btn" id="like<?=$video['fileID']?>" data-voter="<?php echo (isset($_SESSION['user_id']) ? $_SESSION['user_id'] : '');" data-poster="<?=$video['userID']?>" data-class="<?=$_SESSION['class']?>" data-lesson="<?=$_SESSION['lesson']?>" data-file="<?=$video['fileID']?>"> ... </a>

然後使用一個JQuery的click處理程序：

$('a.like-btn').click(function(){ 
    $.ajax({ 
     type:"POST", 
     url:'/ajax/likeFile.php', 
     data:"voter=" + $(this).data('voter') 
     + "&poster=" + $(this).data('poster') 
     + "&classID=" + $(this).data('class') 
     + "&lessonID=" + $(this).data('lesson') 
     + "&id="  + $(this).data('file') 
     + "&type=like", 
     success: function(data) { 
      var $response=$(data); 
      var votes = $response.filter('#voteCount').text(); 
      $('#fileVotes').text(votes); 
      $(this).attr('src', '/images/upvoteDisabled.png'); 
      //$('#unlike').attr('src', '/images/downvote.png'); // fix in your DOM 
     } 
    }); 
});

來源

2011-07-22 21:51:30 AlienWebguy

我不明白傳遞所有'$ _SESSION'數據的目的。如果存儲在會話中，它將在服務器端可用，並且沒有理由將其包含在Ajax請求中發送的數據屬性和數據中。我會刪除它以降低複雜性。 – pifantastic

我會將選擇器更改爲 $（'a.like-btn'）在標籤前加上它會更快。對於一小組結果可能不是很明顯，但對於較大的結果集更好，因爲document.getElementsByTagName（這是它的作用）更快，然後對類進行過濾。此外，如果你可以添加一個上下文選擇器，以改善它（上下文選擇器將圍繞所有鏈接的元素ID） – TommyBs

@ pifantastic絕對沒有真正想過它，直到你說了什麼。謝謝！ – simpiligno

而不是即時生成JavaScript代碼，生成一個PHP數組，使用json_encode（）將其轉換爲本機JavaScript數據類型。在JavaScript中，通過綁定click事件的數據循環。它會更容易，你不需要創建特殊的HTML標記。

來源

2011-07-22 21:50:23 fromvega

爲什麼不使用自定義屬性和類爲您的jQuery選擇要麼？

<a class="like" 
    data-fileID="<?php echo $video['fileID'] ?>" 
    data-userID="<?php echo $video['userID'] ?>">Like</a>

然後，您可以：

$('a.like').click(function(){ 
$.ajax({ 
    type:"POST", 
    url:'/ajax/likeFile.php', 
    data:"voter=" + <?php echo (
     isset($_SESSION['user_id']) ? $_SESSION['user_id'] : ''); ?> 
    + "&poster=" + $(this).data('userID') 
    + "&classID=" + <?php echo $_SESSION['class'] ?> 
    + "&lessonID=" + <?php echo $_SESSION['lesson'] ?> 
    + "&id=" + $(this).data('fileID') 
...

與data-加前綴的屬性將使得HTML5向前兼容，如果你需要驗證的XHTML的早期版本，只是延長了DTD：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
[ 
    <!ATTLIST a data-fileID CDATA #IMPLIED> 
    <!ATTLIST a data-userID CDATA #IMPLIED> 
]>

來源

2011-07-22 21:53:12

而不是'$（this）.attr（'data-userID'）'他可以使用'$（this）.data（'userID'）' – AlienWebguy

@AlienWebguy，尼斯。證明你每天都能學到新的東西。我一定會在將來使用它。 –

沒有問題:)用jQuery似乎每天都有好幾件事情，雖然哈哈。該圖書館充滿了漂亮的技巧。 – AlienWebguy

給所有元素賦予一個類，點擊時應該觸發投票功能。然後它會像

e.g. that is an anchor element with voteup class 
    $('.voteup').click(function(){ 
     var fileid = $this.attr('id'); 
     //update $video['fileid'] with fileid 
     //the code to update a specific class element can be implemented with this approach as well 
    })

來源

2011-07-22 21:53:37 Ehtesham

將jquery函數鏈接到PHP查詢結果

回答

相關問題