Как вы связываете/связываете два элемента вместе с 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>

Есть ли способ, чтобы действия на каждой кнопке соответствует соответствующая строка таблицы, без необходимости использовать конкретный идентификатор каждый раз?

Например, я знаю, что могу сделать что-то вроде этого:

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

Но вместо того, чтобы написать, что в три раза для каждого продукта, есть более простой способ просто «ссылка» в таблице строк и кнопка вместе с тем же классом или rel или что-то еще? (Я новичок в JQuery, как вы можете видеть.)

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

источник

2014-08-31 Lindsay

Подсказка: если вы хотите, действие, которое должно работать на нескольких подобных элементов, в большинстве случаев классов будет лучше над идентификаторами. – blex

Спасибо blex. Я добавил тот же класс к каждой строке и кнопке, поэтому теперь мне просто нужно выяснить, как сказать: «Когда вы нажимаете на кнопку, делайте это в строке таблицы, которая имеет тот же класс», не указывая при этом имя конкретного класса в функция. Правильно? – Lindsay

Просто обновил свой скрипку Fiddle:

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

и добавил классы красный, синий и зеленый для кнопок и тд. Подумайте, что вы можете настроить его дальше.

источник

2014-08-31 15:35:11

Хороший, но текст td должен читать «Добавленный зеленый продукт» –

Да, я знаю, поэтому последнее предложение, как я только думал, может понять, что справится с остальными самостоятельно. Просто давая советы по этому вопросу и не всегда предоставляя полное решение здесь;) –

Это сработало отлично. Теперь я понимаю, насколько это было просто. Это определенно помогло мне понять это лучше. Спасибо. – Lindsay

Это будет работать в вашем конкретном случае

$('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?

ответ

Смежные вопросы