Javascript Jquery a.Show（）未完全工作

我有两个功能。一个隐藏编辑和删除按钮并显示保存按钮，另一个则相反（隐藏保存、显示编辑和删除）

现在，第一个按钮起作用：保存出现，编辑/删除消失，但第二个功能不起作用：它隐藏保存，但只显示删除…不知何故，编辑没有显示

按钮中的按钮代码

---

我认为问题在于您使用了

.nextest（）

函数，该函数从所选元素开始查找给定选择器的最近的父项。对于

最近的（）

---

您可能打算使用和函数

我认为问题在于您使用了

.nextest（）

函数，该函数从所选元素开始查找给定选择器的最近的父项。对于

最近的（）

---

您可能打算使用和函数

通过

$（元素）.hide（）隐藏实际按钮在
someFunction
中，您正在显示
项目编辑按钮
span，因此实际按钮仍然隐藏。试试这个

function saveFunction(element) 
{
    $(element).hide();  
    $(element).closest("td").find("span.item-edit-button button").show();
    $(element).closest("td").find("span.item-delete-button").show();
}

您已经通过
$（元素）.hide（）隐藏了实际按钮在
someFunction
中，您正在显示
项目编辑按钮
span，因此实际按钮仍然隐藏。试试这个

function saveFunction(element) 
{
    $(element).hide();  
    $(element).closest("td").find("span.item-edit-button button").show();
    $(element).closest("td").find("span.item-delete-button").show();
}

必须在HTML元素之前定义函数，这意味着如果元素位于body标记中，则必须在head标记中定义函数

然后您可以稍微更改代码

function someFunction(element) 
{   
    $(element).hide();
    $(element).siblings("span.item-save-button").show();
    $(element).siblings("span.item-delete-button").hide();
}

function saveFunction(element) 
{
    $(element).hide();  
    $(element).siblings("span.item-edit-button").show();
    $(element).siblings("span.item-delete-button").show();

}

这是代码的工作提琴

必须在HTML元素之前定义函数，这意味着如果元素位于body标记中，则必须在head标记中定义函数

然后您可以稍微更改代码

function someFunction(element) 
{   
    $(element).hide();
    $(element).siblings("span.item-save-button").show();
    $(element).siblings("span.item-delete-button").hide();
}

function saveFunction(element) 
{
    $(element).hide();  
    $(element).siblings("span.item-edit-button").show();
    $(element).siblings("span.item-delete-button").show();

}

这是代码的工作提琴

您正在隐藏元素（按钮），但它们显示TD。所以结果是TD是可见的，但按钮本身仍然是隐藏的

以下是工作代码：

function someFunction(element) 
{   
    $(element).closest("td").find("span.item-edit-button").hide();
    $(element).closest("td").find("span.item-save-button").show();
    $(element).closest("td").find("span.item-delete-button").hide();
}

function saveFunction(element) 
{
    $(element).closest("td").find("span.item-save-button").hide();  
    $(element).closest("td").find("span.item-edit-button").show();
    $(element).closest("td").find("span.item-delete-button").show();
}

您正在隐藏元素（按钮），但它们显示TD。所以结果是TD是可见的，但按钮本身仍然是隐藏的

以下是工作代码：

function someFunction(element) 
{   
    $(element).closest("td").find("span.item-edit-button").hide();
    $(element).closest("td").find("span.item-save-button").show();
    $(element).closest("td").find("span.item-delete-button").hide();
}

function saveFunction(element) 
{
    $(element).closest("td").find("span.item-save-button").hide();  
    $(element).closest("td").find("span.item-edit-button").show();
    $(element).closest("td").find("span.item-delete-button").show();
}

这并不能直接回答您的问题，但我认为它简化了您的代码，这可能会有所帮助


…编辑
...
$（“#项目编辑”）。单击（函数（）{
$（this.hide（）；
$（“#项目保存”）.show（）；
$（“#项目删除”）.hide（）；
});
$（“#项目保存”）。单击（函数（）{
$（this.hide（）；
$（“#项目编辑，#项目删除”）.show（）；
});
这并不能直接回答您的问题，但我认为它简化了您的代码，这可能会有所帮助


…编辑
...
$（“#项目编辑”）。单击（函数（）{
$（this.hide（）；
$（“#项目保存”）.show（）；
$（“#项目删除”）.hide（）；
});
$（“#项目保存”）。单击（函数（）{
$（this.hide（）；
$（“#项目编辑，#项目删除”）.show（）；
});
这只是一个建议，但您可能应该开始考虑使用jQuery而不是内联绑定到事件。请参阅jquery.on（），为什么不使用
click（）
并从HTML中获取JS？这只是一个建议，但您可能应该开始考虑使用jquery而不是内联绑定到事件。请参阅jquery.on（），为什么不使用
click（）
并将JS从HTML中删除？
。这里最接近的（）
是正确的。在本例中，具有onclick处理程序的元素没有同级。
.closest（）
在这里是正确的。具有onclick处理程序的元素，在本例中为
，没有同级。非常感谢，我完全错过了这一点！我将奖励你答案，因为你首先得到了答案。非常感谢你，我完全错过了！既然你先得到答案，我就奖励你
<button id="item-edit" ...>...Edit</button>
...

$('#item-edit').click(function () {
    $(this).hide();
    $('#item-save').show();
    $('#item-delete').hide();
});
$('#item-save').click(function () {
    $(this).hide();
    $('#item-edit, #item-delete').show();
});