你如何關聯/鏈接jQuery的兩個元素？

我有一個表像這樣：你如何關聯/鏈接jQuery的兩個元素？

<table> 
<tr id="green-row" class="green"><td></td></tr> 
<tr id="red-row" class="red"><td></td></tr> 
<tr id="blue-row" class="blue"><td></td></tr> 
</table>

然後，我有相同的頁面（但獨立於表）上的按鈕，像這樣：

<button id="add-green" class="green">Add Green Product</button> 
<button id="add-red" class="red">Add Red Product</button> 
<button id="add-blue" class="blue">Add Blue Product</button>

是否有辦法有措施每個按鈕對應其關聯的表格行，而不必每次都使用特定的ID？

例如，我知道我可以做這樣的事情：

$('#add-green').click(function() { 
    $('#green-row td').append('<p>Added Green Product</p>') 
});

但不是必須編寫三次，每次的產品，有沒有簡單的方法，只是「鏈接」錶行和按鈕連同相同的類或一個rel或什麼？（我是新來的jQuery，你可以看到。）

小提琴：http://jsfiddle.net/mqp5ev2p/3/

來源

2014-08-31 Lindsay

提示：如果你想要一個動作，以在多個類似元素的工作，大部分的時間類的都將是最好的了的ID。 – blex 2014-08-31 15:26:37

謝謝blex。我爲每一行和按鈕添加了相同的類，所以現在我只需要弄清楚如何說「當你點擊按鈕時，對具有相同類的錶行執行此操作」，而不必使用特定的類名稱功能。對？ – Lindsay 2014-08-31 15:31:27

剛剛更新您的小提琴Fiddle：

$('button').click(function() { 
    var col = $(this).attr("class"); 
    var colcopy = $(this).text(); 
    $("td." + col).append(colcopy); 
});

並補充類紅色，藍色和綠色的按鈕和TD。認爲你可以進一步調整。

來源

2014-08-31 15:35:11

不錯，但td文本應該是「添加綠色產品」 – 2014-08-31 15:40:23

是的，我知道，因此最後一句話，因爲我剛纔認爲OP可以找出自己處理剩下的問題。只是提供這個問題的提示，並不總是在這裏提供完整的解決方案;） – 2014-08-31 15:41:32

這工作得很好。現在我意識到它有多簡單。這無疑幫助我更好地理解它。謝謝。 – Lindsay 2014-08-31 15:42:20

這將在您的特定情況下工作

$('button[id^="add"]').click(function(){ 
    var idPart = $(this).attr('id').split('-')[1]; 
    $('tr[id^="'+idPart+'"] td').append('<p>Added '+ idPart+' Product</p>'); 
})

DEMO

它將添加爲Added red Product如果您想要獲得以大寫字母開頭的顏色名稱。使用此行

$('tr[id^="'+idPart+'"] td').append('<p>Added '+ idPart.charAt(0).toUpperCase() + idPart.slice(1) +' Product</p>');

來源

2014-08-31 15:34:25 Mritunjay

這是我幫你

<table id="mytable"> 
    <tr data-relation="green"><td></td></tr> 
    <tr data-relation="red"><td></td></tr> 
    <tr data-relation="blue"><td></td></tr> 
</table> 

<button class="mybtn" data-relation="green">Add Green Product</button> 
<button class="mybtn" data-relation="red">Add Red Product</button> 
<button class="mybtn" data-relation="blue">Add Blue Product</button> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".mybtn").click(function(){ 
     var selected = $(this).attr("data-relation"); 
     var valuetoappend = $(this).html(); 
     $("#mytable tr").each(function(){ 
      var relation = $(this).attr("data-relation"); 
      if(selected===relation) 
       $(this).next().append(valuetoappend); 
     }); 
    }); 
}); 
</script>

來源

2014-08-31 15:40:11 kefy

你如何關聯/鏈接jQuery的兩個元素？

回答

相關問題