javascript - Jquery a .Show() 没有完全工作

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/

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

回答 我不小心隐藏了 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();
}