Question

我有两个功能。一个隐藏了编辑和删除按钮，并显示一个保存按钮，另一个执行相反的操作（隐藏保存，显示编辑和删除）。

现在第一个按钮正常工作：保存出现，编辑/删除消失，但第二个功能不起作用：它隐藏保存，但只显示删除...不知怎么编辑没有显示。

<td>

中的按钮代码

<td class="col-lg-3 col-lg-offset-1">
    <span style="visibility:hidden" class="ID">@Html.DisplayFor(modelItem => item.ID)</span>

    <span class="item-edit-button">
          <button type="button" onclick="someFunction(this)" class=" btn btn-warning col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
    </span>

    <span class="item-save-button">
          <button type="button" onclick="saveFunction(this)" class="btn btn-success col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Save</button>
    </span>

    <span class="item-delete-button"> // no use right now - ignore
          <button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
    </span>
</td>

JQuery

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

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

    }
</script>

http://jsfiddle.net/isherwood/BrP2a/

希望我只是犯了一些愚蠢的错误。

ANSWER 我不小心隐藏了button，而不是span，因此当我试图显示我的编辑按钮的跨度时，它不起作用，因为按钮本身最初是为了解决这个我必须使用的隐藏。

function someFunction(element) {

        $(element).closest("span").hide();
        $(element).closest("td").find("span.item-save-button").show();
        $(element).closest("td").find("span.item-delete-button").hide();

    }

 function saveFunction(element) {

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

Answer 1

您已在$(element).hide();中隐藏了someFunction的实际按钮，并且您显示的是item-edit-button范围，因此仍然隐藏了实际按钮。试试这个，

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

Answer 2

你必须在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();

}

这是代码的工作小提琴

http://jsfiddle.net/murli2308/YeZDe/

Answer 3

我认为问题在于您使用.closest()函数，该函数从所选元素开始查找给定选择器的最近父。 closest()的{{3}}。

您可能打算使用See documentation和.prev()函数。

Answer 4

您正在隐藏元素（按钮）但显示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();
}

Answer 5

这不能直接回答您的问题，但我认为它可以帮助您简化代码。

http://jsfiddle.net/isherwood/BrP2a/4/

<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();
});

Jquery a .Show（）没有完全正常工作

5 个答案: