仅切换特定行中按钮的类

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

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中访问我想要的按钮类我有这个:

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.target的event参数。此属性包含触发事件的元素。使用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');