Question

使用PHP我正在检索视频列表。我正在使用jquery以叠加方式显示视频。我有一切工作，但问题是实现方法对我来说似乎有点暴力，我正在寻找一种方法来削减冗余代码。

基本上，我从数据库中获取视频列表，并将使用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函数？

我知道这是一个非常复杂的问题。提前感谢任何想要解决这个问题的人。

Answer 1

首先，设置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单击处理程序：

$('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
        }
    });
});

Answer 2

为什么不为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>
]>

Answer 3

生成PHP数组，使用json_encode（）将其转换为本机JavaScript数据类型，而不是动态生成JavaScript代码。在JavaScript中，您通过绑定click事件的数据循环。它会更容易，您不需要创建特殊的HTML标记。

Answer 4

为所有在点击时应触发投票功能的元素提供一个类。那就像是

    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
    })

将jquery函数链接到PHP查询结果

4 个答案: