Переключить класс кнопки только в определенной строке

Question

Я пытаюсь переключить класс, который скрывает кнопку редактирования при нажатии и отображает кнопку сохранения и отмены. Они заполняются в таблице, поэтому каждая строка имеет собственный набор кнопок редактирования, сохранения и отмены. В настоящее время, когда я нажимаю на кнопку редактирования, он скрывает все кнопки редактирования в таблице и показывает все кнопки сохранения и отмены. Я пытаюсь сделать так, чтобы только набор кнопок в определенной строке переключился.

В таблице заселяется из запроса:

foreach ($queryResult as $retrieved_data) { 
    $content .= "<tr id=\"id_$retrieved_data->id\"> 
        <td id=\"td_id\">$retrieved_data->id</td> 
        <td id=\"td_name\">$retrieved_data->posname</td> 
        <td id=\"td_month\">$retrieved_data->month</td> 
        <td id=\"td_year\">$retrieved_data->year</td> 
        <td id=\"td_avail\">$retrieved_data->availableinv</td> 
        <td id=\"td_max\">$retrieved_data->maxinv</td> 
        <td id=\"td_edit\"><button type=\"button\" class=\"editImpressionsBtn\" id=\"editImpressionsBtn\" value=\"Edit\">Edit</button></td> 
        <td id=\"td_save\"><button type=\"button\" class=\"saveImpressionsBtn hide\" id=\"saveImpressionsBtn\" value=\"Save\">Save</button></td> 
        <td id=\"td_cancel\"><button type=\"button\" class=\"cancelImpressionsBtn hide\" id=\"cancelImpressionsBtn\" value=\"Cancel\">Cancel</td> 
       </tr>"; 
} 
return $content; 

настоящее время у меня следующий код для обработки события:

jQuery('#positionImpressions').on('click', '#editImpressionsBtn', function() { 
    var row = jQuery(this).closest('tr'); 
    var id = row.find('#td_id').text(); 
    var max = row.find('#td_max').text(); 
    var available = row.find('#td_avail').text(); 
    console.log(id + ', ' + max + ', ' + available); 
    jQuery('.editImpressionsBtn').toggleClass('hide'); 
    jQuery('.saveImpressionsBtn').toggleClass('hide'); 
    jQuery('.cancelImpressionsBtn').toggleClass('hide'); 

    var maxBox = row.find('#td_max'); 
    maxBox.empty().append('<input type="text" id="newMax" value="'+max+'"></input>'); 
}); 

Я пытался получить доступ к строке затем найти колонку который держит кнопку, как это, но он не работает:

row.find('#td_edit').toggleClass('.editImpressionsBtn', 'hide'); 
row.find('#td_save').toggleClass('.saveImpressionsBtn', 'hide'); 
row.find('#td_cancel').toggleClass('.cancelImpressionsBtn', 'hide'); 

Ряд varia ble - строка, в которой выполняется действие. , но это, похоже, не сработало. Любые советы получили бы высокую оценку.

Вот как я заработал. В таблице теперь у меня есть все три кнопки в td_edit, так что, когда кнопка редактирования скрыта есть не пустое пространство в этой колонке:

<td id=\"td_edit\"> 
    <button type=\"button\" class=\"editImpressionsBtn\" id=\"editImpressionsBtn\" value=\"Edit\">Edit</button> 
    <button type=\"button\" class=\"saveImpressionsBtn hide\" id=\"saveImpressionsBtn\" value=\"Save\">Save</button> 
    <button type=\"button\" class=\"cancelImpressionsBtn hide\" id=\"cancelImpressionsBtn\" value=\"Cancel\">Cancel</button> 
</td> 

Тогда в моей JQuery, чтобы получить доступ к классу кнопки я хотел меня это:

row.find('#td_edit').find('.editImpressionsBtn').toggleClass('hide'); 
row.find('#td_edit').find('.saveImpressionsBtn').toggleClass('hide'); 
row.find('#td_edit').find('.cancelImpressionsBtn').toggleClass('hide'); 

Answer 1

Нажмите Обратный вызов получает event аргумент, который имеет свойство event.target .. Это свойство содержит элемент, вызвавший событие .. использовать JQuery для получения родительского элемента этого целевого элемента, чтобы получить щелкнул строку и применяйте те селекторы, которые у вас уже есть только в этой строке, а не на весь документ ...

EDIT: Это было долгое время, так как я прикоснулся JQuery так что это может понадобиться полировка, но вы можете попробовать это так:

// here we need to call parent() twice, because button's parent is a 
// 'td' element and we need to get to 'tr' which is one level up 
var row = jQuery(event.target).parent().parent() 
row.find('#editImpressionsBtn').toggleClass('hide'); 
row.find('#saveImpressionsBtn').toggleClass('hide'); 
row.find('#cancelImpressionsBtn').toggleClass('hide');