使用 javascript 隐藏转发器链接按钮

Question

我有一个中继器和一些物品。其中一项是链接按钮。我想隐藏它，实际上我可以，但只能隐藏第一个。我的意思是如果转发器显示 4 条记录，只有第一个的链接按钮会被隐藏。我可以看到我需要一个循环来打开中继器并隐藏所有链接按钮，但我真的卡住了，因为我是 javascript 的初学者。这是我的中继器：

<asp:Repeater DataSourceID="EntityDataSourceHdcvi" ID="Repeater1" runat="server">
   <ItemTemplate>
        //Some other code
        <div id="silBeni" class="sil fl">
          <asp:LinkButton ID="deleteProduct" runat="server" Text="Kaldır" CommandArgument='<%#Eval("UrunId")%>' CommandName="deleteProduct" OnClick="LinkButton_Click"></asp:LinkButton>
        </div>
   </ItemTemplate>
</asp:Repeater>

还有我的 javascript 代码：

function hideColumn() {
    sartnameDiv.style.display = 'block';

    var bizimDiv = document.getElementById("silBeni");
    bizimDiv.style.display = "none";
}

Answer 1

您可以通过 class 进行搜索。不能有多个元素具有相同的 id，因此我们通过 class.

搜索多个元素

var elements = document.getElementsByClassName("sil");

Array.prototype.forEach.call(elements, function(element) {
  element.style.display = "none";
});

请注意，普通数组函数不能用于 getElementsByClassName 的结果，因此这就是您需要

的原因

 Array.prototype.forEach.call

而不是像普通数组那样写。

elements.forEach(function(element){
});

但是请注意，现在我们将找到所有具有 class sil 的元素，这意味着如果您在页面上有更多具有此 class 的元素，它们也会被找到，所以你可能需要相应地调整你的html。

编辑：根据 Webruster 的评论，我们还需要确保函数在我们希望它被调用时被调用。

Answer 2

而不是更改 HTML，您可以创建一个虚拟 css 并附加到您想要对其进行一些操作的 HTML，其余选项由@法肯尼克。请在下面查看如何添加虚拟 css :

这里是HTMl

<asp:Repeater DataSourceID="EntityDataSourceHdcvi" ID="Repeater1" runat="server">
   <ItemTemplate>
        //Some other code
        <div id="silBeni" class="sil fl hideclass">
          <asp:LinkButton ID="deleteProduct" runat="server" Text="Kaldır" CommandArgument='<%#Eval("UrunId")%>' CommandName="deleteProduct" OnClick="LinkButton_Click"></asp:LinkButton>
        </div>
   </ItemTemplate>
</asp:Repeater>

制作一个虚拟 Css 并尝试附加到要隐藏的 Div

<style>
.hideclass{
}
</style>

JS

function hideColumn() {
    sartnameDiv.style.display = 'block';
 var elements = document.getElementsByClassName("hideclass");
   Array.prototype.forEach.call(elements, function(element) {
  element.style.display = "none";
});

}

使用 javascript 隐藏转发器链接按钮

Make a repeater linkbutton hidden with javascript

javascript

asp.net

repeater

hidden