Question

我很沮丧！作为一个好的PHP开发人员，我无法理解jquery问题的简单化！

我最近将我的HTML jquery include移到HTML正文的末尾，而不是在头脑中改进google 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包含之后包含的迷你函数，然后使用jquery DATA-属性将ID和VOTE-DIRECTION传递给HTML a hrefs中的函数。

非常感谢任何帮助。我的头发已用完了！

Answer 1

我认为，重复的代码会损坏您的页面，而不是放置JQuery文件。

您可以使用更常规的事件侦听器来解决此问题。删除代码 （所有这些） 中的所有侦听器，并在Jquery include之后附加下面的代码。

$('[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为＆＃34; comment-vote＆＃34;的元素。如果用户点击其中一个元素，则事件处理程序获取元素的id，分成如＆＃34;评论＆＃34;，＆＃34;投票＆＃34;，＆＃34; up＆＃34;，＆＃34; 19900＆＃34 ;.第二部分是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>

拥有upvote和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

将jquery转换为可包含的可调用函数

2 个答案: