仅在特定行中切换按钮类别

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

行变量是正在执行操作的行。 但这似乎不起作用。任何建议将不胜感激。

这是我如何让它工作的。在表格中，我现在在 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 检索该目标元素的父元素以获取单击的行并应用那些您已经在这一行而不是整个文档上拥有的选择器......

编辑： 很久没有接触 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');