Question

我有这个jQuery文件，但是vote_up click handler与vote_down click handler保持冲突，当我点击vote_down元素时它改变了vote_up元素：

jQuery脚本：

$(document).ready(function () {
    $("a.vote_up").click(function () {
        //get the id
        var the_id = this.id.split('_').pop();
        //the main ajax request
        $.ajax({
            type: "POST",
            data: "action=vote_up&id=" + the_id,
            url: "ajax/votes.php",
            success: function (msg) {
                $("span.vote_count#" + the_id).html(msg).fadeIn();
                $("#" + the_id + " img").attr("src", "img/uparrowActive.png");
            }
        });
    });
});
$(document).ready(function () {
    // the vote down function
    $("a.vote_down").click(function () {
        //get the id
        var vote_id = this.id.split('_').pop();
        //the main ajax request
        $.ajax({
            type: "POST",
            data: "action=vote_down&id=" + vote_id,
            url: "ajax/votes.php",
            success: function (msg) {
                $("span.vote_count#" + vote_id).html(msg).fadeIn();
                $("#" + vote_id + " img").attr("src", "img/downarrowActive.png");
            }
        });
    });
});

html：

<a href='#' class='vote_up' id="id_23"><img src="img/uparrow.png" /></a>
<a href='#' class='vote_down' id="id_23"><img src="img/downarrow.png" /></a>

jQuery和ajax请求很好，但是src的更改是问题，因为当我点击向下投票时，它会更改vote_up图像!!

Answer 1

您不能对两个不同的元素使用相同的“id”值。

Answer 2

如果您正在寻找某种将事件聚焦到重复数据的策略，那么利用附加数字的ID来引用各种元素可能会有效，但可能不是最好的方法。

我假设每个重复项目都有自己的重复容器。你可能最好在该容器上放置一个唯一的ID，并从那里找到元素。

以此为例：

<div id='outerContainer'>
    <div id='set_123' class='someContainer'>
        <a href='#' class='vote_up'><img src="img/uparrow.png" /></a>
        <span class='vote_count'></span>
        <a href='#' class='vote_down'><img src="img/downarrow.png" /></a>
    </div>
    <div id='set_124' class='someContainer'>
        <a href='#' class='vote_up'><img src="img/uparrow.png" /></a>
        <span class='vote_count'></span>
        <a href='#' class='vote_down'><img src="img/downarrow.png" /></a>
    </div>
    <div id='set_125' class='someContainer'>
        <a href='#' class='vote_up'><img src="img/uparrow.png" /></a>
        <span class='vote_count'></span>
        <a href='#' class='vote_down'><img src="img/downarrow.png" /></a>
    </div>
</div>

当您点击相应的向上/向下元素时，您可以use .delegate()在点击处理程序上点击#outerContainer。

类似的东西：

$(document).ready(function() {
    $('#outerContainer').delegate('.vote_up', 'click', function() {
       //get the id
        var the_id = $(this).closest('.someContainer').attr('id').split('_').pop();
        //the main ajax request
        $.ajax({
            type: "POST",
              // Make sure "this" in the callback refers to the element clicked
            context: this,
            data: "action=vote_up&id=" + the_id,
            url: "ajax/votes.php",
            success: function (msg) {
                  // Not sure where your vote_count is. See the HTML for my placement
                $(this).siblings("span.vote_count").html(msg).fadeIn();
                  // get the child <img> and set its src
                $(this).children("img").attr("src", "img/uparrowActive.png");
            }
        });
    });
    $('#outerContainer').delegate('.vote_down', 'click', function() {
       //get the id
        var the_id = $(this).closest('.someContainer').attr('id').split('_').pop();
        //the main ajax request
        $.ajax({
            type: "POST",
              // Make sure "this" in the callback refers to the element clicked
            context: this,
            data: "action=vote_down&id=" + the_id,
            url: "ajax/votes.php",
            success: function (msg) {
                  // Not sure where your vote_count is. See the HTML for my placement
                $(this).siblings("span.vote_count").html(msg).fadeIn();
                  // get the child <img> and set its src
                $(this).children("img").attr("src", "img/downarrowActive.png");
            }
        });
    });
});

因此，您需要的ID就在每个.someContainer上。您遍历到该容器以获取ID，然后执行.split().pop()。

然后在AJAX请求中，我设置了the context: property for $.ajax()，以便this仍然会引用回调中单击的元素。

在回调中，您会找到包含.vote_count类的the .siblings()，并设置its .html()内容。

最后，您use .children()获取img元素，并设置其src属性。

这应该给出一般的想法。您需要调整HTML。

jQuery - 单击一个元素会触发另一个元素

2 个答案: