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」值。