Блог

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

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

 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');
  

Переменная row — это строка, над которой выполняется действие.
но, похоже, это не сработало. Любой совет будет высоко оценен.

Вот как я заставил это работать. В таблице у меня теперь есть все три кнопки в 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 для доступа к классу buttons, который я хотел, у меня есть это:

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

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

РЕДАКТИРОВАТЬ: Прошло много времени с тех пор, как я касался 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');