Ich versuche, ein Div zu verstecken/anzuzeigen/toggeln, wenn eine Taste geklickt wird. Ich benutze ASP.NET und alles ist in einem ASP: Datalist.Zeige/Verstecke bestimmte Div mit JQuery auf Knopf Klicken
Ich kann das Div korrekt anzeigen oder ausblenden. Es öffnet jedoch alle Divs statt nur die, wo die Schaltfläche ausgewählt wurde. Das Div ist versuchen zu zeigen/zu verbergen ist .content
Wie kann ich nur das div öffnen, dass der Button gehört?
JSFiddle - hier ist ein Beispiel für das Problemhttp://jsfiddle.net/kMEre/
Das Skript:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#man').live('click', function (event) {
jQuery('.content').toggle('show');
});
});
</script>
Die Datenliste (ASP.NET)
<asp:DataList runat="server" id="dgQuestionnaire" DataKeyField="QuestionID" >
<ItemTemplate>
<div class="question_box">
<p class="small_bold">Question <asp:Label ID="lblOrder" runat="server" Text='<%# Container.ItemIndex + 1 %>'></asp:Label></p>
<div class="Questions">
<div class="heading">
<asp:HiddenField ID="hiddenQuestionID" runat="server" Value='<%# Eval("QuestionID") %>' />
<asp:TextBox runat="server" ID="tbQuestionName" Text='<%# Eval("QuestionText") %>' CssClass="form" Width="300px"></asp:TextBox>
<input type='button' id='man' value='hide/show'>
</div> <!-- end heading -->
<div class="content">
<p class="small_bold new">Question Type</p>
<asp:DropDownList runat="server" ID="QuestnType" CssClass="question_dropdown">
<asp:ListItem Value="1">Check Boxes (Multiple Choice)</asp:ListItem>
<asp:ListItem Value="2">Drop Down</asp:ListItem>
<asp:ListItem Value="3">Open Ended</asp:ListItem>
<asp:ListItem Value="4">Radio Buttons (Single Choice)</asp:ListItem>
<asp:ListItem Value="5">Range (Percentage)</asp:ListItem>
</asp:DropDownList>
<asp:DataList ID="nestedDataList" runat="server">
<ItemTemplate>
<p class="new">Answer <asp:Label ID="lblAnswerOrder" runat="server" Text='<%# Container.ItemIndex + 1 %>'></asp:Label></p>
<asp:HiddenField ID="hiddenAnswerID" runat="server" Value='<%# Eval("AnswerID") %>' />
<asp:TextBox ID="TextBox1" runat="server" CssClass="form" Text='<%# Eval("AnswerID") %>' Width="300px"></asp:TextBox>
<asp:TextBox ID="tbAnswerText" runat="server" CssClass="form" Text='<%# Eval("AnswerTitle") %>' Width="300px"></asp:TextBox>
</ItemTemplate>
</asp:DataList>
<asp:Button runat="server" ID="updateName" CssClass="button_update" style="border: 0px;" onClick="UpdateQuestionName_Click" />
<asp:Button runat="server" ID="btnDelete" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this question?');" />
</div>
</div> <!-- end Questions -->
</div> <!-- end questionbox -->
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#man').live('click', function (event) {
jQuery('.content').toggle('show');
});
});
</script>
</ItemTemplate>
Ein ID-Attributwert muss nur einmal auf einer Seite verwendet werden. – Daxcode