Machen Sie eine Repeater Linkbutton mit Javascript versteckt

Question

Ich habe einen Repeater und einige Elemente drin. Eines dieser Elemente ist ein Linkbutton. Ich möchte es verstecken und eigentlich kann ich aber nur die erste. Ich meine, wenn der Repeater 4 Datensätze anzeigt, wird nur der Linkbutton des ersten verborgen. Ich kann sehen, dass ich eine Schleife brauche, um innerhalb des Repeaters zu drehen und alle linkbuttons zu verstecken, aber ich steckte wirklich fest, seit ich Anfänger in Javascript bin. Hier ist mein Repeater:

<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> 

Und mein Javascript-Code:

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

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

Answer 1

Was Sie tun können, ist von der Klasse zu suchen. Es kann nicht mehrere Elemente mit derselben ID geben, stattdessen suchen wir mehrere Elemente nach Klassen.

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

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

Hinweis, dass gewöhnliche Array-Funktionen nicht auf das Ergebnis aus getElementsByClassName verwendet werden kann, so dass, warum Sie die

Array.prototype.forEach.call 

statt nur zu schreiben wie für ein gewöhnliches Array

brauchen, ist.

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

Sie jedoch beachten, dass jetzt werden wir alle Elemente finden, die die Klasse sil haben, was bedeutet, dass, wenn Sie mehr Elemente mit dieser Klasse auf der Seite haben, werden sie auch gefunden werden, so müssen Sie unter Umständen anpassen Dein HTML entsprechend.

Edit: wie von Webbruster Kommentar, müssen wir auch sicherstellen, dass die Funktion aufgerufen wird, wenn wir es aufgerufen werden möchten.

Answer 2

Anstatt den HTML-Code zu ändern, können Sie einen Dummy-CSS erstellen und an den HTML-Code anhängen, für den Sie eine Operation ausführen möchten. Die restliche Operation wird von @Fakenick sauber erklärt. Bitte sehen Sie, wie Sie diese Dummy-css unten hinzufügen:

Hier ist die 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> 

Erstellen Sie eine Dummy-Css und versuchen, die Div anhängen, die

versteckt werden

JS

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

}