0

我正在尝试根据另一列值隐藏表格列中的按钮，有一个表格列字段调用“存档”，如果该值为 true，我想隐藏另一列中的按钮。但是，我下面的代码仅隐藏了第一行中的按钮并忽略了后续行。请协助。谢谢。

<table class="table table-striped table-bordered">
    <tr>
        <td width="8%" class="table_pink" style="background-color:#ED4085">Name</td>
        <td width="8%" class="table_pink" style="background-color:#ED4085">Email</td>
        <td width="8%" class="table_pink" style="background-color:#ED4085">Country</td>
        <td width="8%" class="table_pink" style="background-color:#ED4085">Time</td>
        <td width="5%" class="table_pink" style="background-color:#ED4085">WrongAtQuestion</td>
        <td width="5%" class="table_pink" style="background-color:#ED4085">Winner?</td>
        <td width="5%" class="table_pink" style="background-color:#ED4085">CreatedDateTime</td>
        <td width="5%" class="table_pink" style="background-color:#ED4085">Hidden</td>
        <td width="20%" class="table_pink" style="background-color:#ED4085">Action</td>
    </tr>

    @foreach (var item in Model)
    {
        if (item.Archive)
        {
            <script type="text/javascript">
                $('#hideButton').hide();
            </script>
        }

           <tr>
               <td>@item.Name</td>
               <td>@item.Email</td>
               <td>@item.Country</td>
               <td>@item.Time</td>
               <td>@item.WrongAtQuestion</td>
               <td>@item.IsWinner</td>
               <td>@item.CreatedDateTime</td>
               <td>@item.Archive</td>
               <td><a class="btn btn-primary" href="#" id="hideButton" onclick="deleteEntry('@item.Id', '@item.Name'); return false;"><i class="icon-white icon-trash"></i> Hide from Leaderboard</a></td>
           </tr>         
    }
</table>
4

1 回答 1

1

那么第一个问题是您正在创建无效的 html。该id属性应该是唯一的，但是在每一行中，您都输出一个带有id="hideButton".

然后，当您使用$('#hideButton')它时，它将（在大多数浏览器中）找到具有该 id 的第一个元素，而不是所有元素。但是即使允许重复的 id，也没有什么可以将脚本与$('#hideButton').hide()任何特定的行联系起来——只是因为脚本块恰好在行之前并没有在它们之间建立联系。

相反，我建议您完全摆脱该脚本块，然后在带有链接的元素if 内部使用服务器端，以便仅在为 falsetd时才包含链接。item.Archive那么你就不需要任何 JS/jQuery/CSS。我不熟悉您使用的服务器端语言，但在伪代码中它可能看起来像这样：

<td>
    @if(!item.Archive){
    <a class="btn btn-primary" href="#" onclick="deleteEntry('@item.Id', '@item.Name'); return false;"><i class="icon-white icon-trash"></i> Hide from Leaderboard</a>
    }
</td>

另一种选择是使用服务器端代码添加class="archive"到相关的锚元素，然后使用这个 jQuery：

$(document).ready(function() {
     $("a.archive").hide();
});

（或者，如果您需要根据存档状态执行其他操作，您可能希望将类放在 tr 元素上并使用$("tr.archive a.btn").hide();.）

于 2012-08-31T04:23:49.093 回答