jQuery - 单击一个元素会触发另一个元素 [英] jQuery - clicking on one element triggers another

问题描述

我有这个jQuery文件，但 vote_up点击处理程序与 vote_down点击处理程序保持冲突，当我点击vote_down元素，它改变了vote_up元素：

i have this jQuery file, but the vote_up click handler keeps conflicting with the vote_down click handler, when i click the vote_down element it changes the vote_up element:

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图像！

the jQuery and ajax request is wokring fine, but the change of src is the problem, because when i click vote down, it changes the vote_up image!!

推荐答案

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

If you're looking for some sort of strategy for focusing events to a repeating piece of data, utilizing IDs with the number appended to reference the various elements may work, but may not be the best approach.

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

I assume each repeating item has its own container that repeats. You may be better off placing a unique ID on that container, and finding the elements from there.

以此为例：

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

你可以使用 .delegate（） 将点击处理程序放在 #outerContainer 上当你点击相应的向上/向下元素时。

You could use .delegate() to place click handlers on the #outerContainer that fire when you click the appropriate up/down elements.

类似于：

$(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（）。

So the ID with the number you need is on each .someContainer. You traverse up to that container to get the ID, and do your .split().pop().

然后在AJAX请求中，我设置了 上下文： $。ajax（） 的属性，以便此仍然会引用被点击的元素在你的回调中。

Then in the AJAX request, I set the context: property for $.ajax() so that this will still refer to the element that was clicked in your callback.

在回调中，你会发现 .siblings（） ，其类别为 .vote_count ，并设置其 .html（） 内容。

Inside the callback, you find the .siblings() that have the class .vote_count, and set its .html() content.

最后你使用 .children（） 获取 img 元素，并设置其 src 属性。

Finally you use .children() to get the img element, and set its src attribute.

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

This should give the general idea. You'll need to adjust for your HTML.

这篇关于jQuery - 单击一个元素会触发另一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！