Javascript jQuery—单击一个元素会触发另一个元素

我有这个jQuery文件，但

投票向上单击处理程序

与

投票向下单击处理程序

一直冲突，当我单击投票向下元素时，它会更改投票向上元素：

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 down时，它会更改vote\u up图像

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

如果您正在寻找某种将事件聚焦到重复数据段的策略，那么使用附加了编号的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>

因此，每个

.someContainer

上都有您需要的带有数字的ID。您遍历该容器以获取ID，然后执行

.split（）.pop（）

然后在AJAX请求中，我进行了设置，以便

此

仍将引用在回调中单击的元素

在回调中，您可以找到具有类

.vote\u count

，并设置内容的

最后，您需要获得

img

元素，并设置其

src

属性

---

这应该给出总体思路。您需要根据HTML进行调整。

所有这些都可以放在

$（document）.ready（）中。

逃跑-查看@Pointy的答案并记住它。在你之前的问题中已经多次提到过。这是一条不容忽视的非常重要的规则。抱歉这么直截了当。抱歉，我只是这么困惑，这是我的大学项目，所以我必须把它做好，我是个新手：）@getaway-如果你愿意，你可以把它改成

van_halen_1984

，只要它是独一无二的o） 如果您将其更改为“id_23”以外的内容，情况会有所改善。如果您想让事情正常工作，“id”值在整个页面上必须是唯一的。这就是所谓的“id”（“identity”）。我一直认为它是“identification”？现在整个jquery的工作不仅仅是ajax部分：）我想我需要去sleep@colinmarc不管怎样，这意味着“世界上独一无二的东西，就像一片完美的雪花或一只珍贵的鸭宝宝”。谢谢你的回答，我已经修改了所有内容以适应我的html，但是我试图阅读上下文部分，但是我不明白，我已经把ajax发送给投票人了。php不是吗，我在想我应该把这个

$（this.attr（“id”）放进去吗

@getaway-我不理解你的最后一句话，但关于上下文，我之所以将该属性添加到AJAX请求中，是因为在回调中，我想

这个
引用被单击的元素。当你有一个AJAX回调时，就像你的
成功：
回调一样，
这个
magi的含义是什么Caly在回调中更改，使其不再引用已单击的元素。要使其再次引用该元素，请通过请求的
上下文：
属性传递
此
。这只是一种方法，但可能是最干净的方法……如果我没有这样做，
$（this）。兄弟（…
和
$（此）.children（…
将不起作用，因为
此
将不再是对已单击的
.vote\u up
或
.vote\u down
元素的引用。@getaway-您所说的“删除上下文”是什么意思？在我发布的代码中，我希望
this
引用为
成功：
回调而单击的元素。如果我没有
上下文：this
，它将不会。换句话说，在AJAX请求之前（在单击处理程序中），
this
是对单击的元素的引用。但是在
成功：AJAX请求的
回调中，
this
不再引用该元素。但是我们希望它引用该元素。因此，将
上下文：
属性设置为
this
使其继续作为对该元素的引用我的天啊，帕特里克，如果我想对投票进行切换，基本上是反向操作，就像stackoverflow！我想我必须创建另一个脚本来处理反向投票！！：）
$(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");
            }
        });
    });
});