仅切换特定行中的按钮 class

Question

我正在尝试切换 class，该按钮在单击时隐藏编辑按钮并取消隐藏保存和取消按钮。这些被填充在 table 中，因此每一行都有自己的一组编辑、保存和取消按钮。目前，当我点击编辑按钮时，它会隐藏 table 中的所有编辑按钮并显示所有保存和取消按钮。我正在努力做到只有特定行上的一组按钮才会被切换。

正在从查询填充 table：

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

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

这是我如何让它工作的。在 table 中，我现在在 td_edit 中拥有所有三个按钮，因此当编辑按钮被隐藏时，该列中的 space 不为空：

<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 中访问按钮 class 我想要我有这个：

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

仅切换特定行中的按钮 class

Toggle class of button in specific row only

jquery

wordpress

event-handling

html-table

toggleclass