如何使用jquery将两个元素关联/链接在一起

How do you relate/link two elements together with jquery?

本文关键字：元素 两个 关联 在一起 链接 jquery 何使用      更新时间：2023-09-26

我有一个这样的表：

<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的新手。）

Fiddle：http://jsfiddle.net/mqp5ev2p/3/

刚刚更新了您的Fiddle Fiddle:

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

并为按钮和td添加了红色、蓝色和绿色类。你认为你可以进一步调整。

这是我对的帮助

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

这将适用于您的特定情况

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

演示

如果您想获得以大写字母开头的颜色名称，它将添加为Added red Product。使用此线路

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