Кнопка Show/Hide для каждой строки в таблице

Question

У меня есть две кнопки в каждой строке таблицы. Сначала вы видите кнопку 1. Когда нажимается кнопка 1, она исчезает, и появляется кнопка 2. Это просто, но я не понимаю, как создать это поведение для каждой строки отдельно. Сейчас он работает только для первой строки.

Я создал codepen, чтобы лучше проиллюстрировать это:

http://codepen.io/cavanflynn/pen/qdVorB

Я только понять, как сделать это с помощью своих идентификаторов, так что работает только для первой строки.

var first = document.getElementById('first'), 
second = document.getElementById('second'); 

Как вы можете заставить это поведение работать для каждой строки самостоятельно? Благодаря!

Answer 1

Как @casimiryang сказал, проблема - это идентификаторы. У вас может быть только один элемент с тем же идентификатором на странице.

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

$(".first").on("click", function(){ 
    $(this).hide(); 
    $(this).next().show(); 
}); 

$(".second").on("click", function(){ 
    $(this).hide(); 
    $(this).prev().show(); 
}); 

Вот codepen: solution

Answer 2

Поскольку идентификатор должен быть уникальным, document.getElementById() будет первым, я думаю, вы можете изменить id на класс и добавить параметр (строка ведьмы) в функцию переключения. Или в функции переключения с помощью js для получения узла Sbiling

Answer 3

Как вы сказали, у вас есть jQuery, все становится очень простым. Просто замените свои идентификаторы на классы и, для каждой нажатой кнопки, получите вторую в пределах своей родительской (то есть строки). Here's the updated codepen.

$('.first').click(function() { 
    $(this).hide(); 
    // Using .css() instead of .show() because .show() would render the button with its default display (inline) instead of block. 
    $(this).parent().find('.second').css('display', 'block'); 
});