jQuery的 - 点击一个元素上触发另一个

Question

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

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的变化是问题，因为当我点击否决，我t改变了vote_up图像！

Answer 1

如果您正在寻找某种将事件聚焦到重复数据的策略，那么利用带附加数字的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仍然会引用您的回调中被点击的元素。

在回调中，您发现the .siblings()的类别为.vote_count，并且设置了its .html()的内容。

最后你use .children()得到img元素，并设置它的src属性。

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

Answer 2

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