我用asp制作了一个项目,但是有些东西不起作用......我试图显示/隐藏Datalist中的div。但不幸的是,只在第一个元素中工作,而其他元素则是我要隐藏的div。
这是我的代码:
`<script type="text/javascript">
$(function () {
$("#hiden").hide();
$("#showddiv").on("click", function () {
$("#hiden").toggle();
});
});
</script>
<div id="mainReferences">
<asp:DataList ID="DataList1" runat="server" CellPadding="4"
ForeColor="#333333">
<AlternatingItemStyle BackColor="#2E2E2E" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#151515" />
<ItemTemplate>
<table cellspacing="20">
<tr>
<td><a href="#" id="showddiv" class="fontText" title="drop the div down"><img src='<%# Eval("Mainfoto") %>' width="320px" height="290px" /> </a></td>
<td width="400px">
<asp:Label ID="Label1" class="FontText" Font-Bold="true" runat="server" Text="Përshkrimi:"></asp:Label><br />
<asp:Label ID="Label2" width="400px" class="FontText" Font-Size="Large" runat="server" Text='<%# Eval("pershkrimi") %>' ></asp:Label></td>
</tr>
</table>
<div id="hiden" class="categorry"> </div>
</ItemTemplate>
<SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
</asp:DataList>`
答案 0 :(得分:0)
您在HTML中重复使用id
个值。这是无效的标记,可能会导致未定义的行为(浏览器也可能不同)。请注意这个元素:
<div id="hiden" class="categorry">
由于这基本上位于循环(转发器,数据列表等)中,因此它将多次呈现给页面。而不是id
,请使用class
:
<div class="hiden categorry">
然后只需更改你的jQuery选择器:
$('.hiden')
当然,现在您还需要专门识别要切换的元素。您可以通过从点击的元素中稍微遍历DOM来完成此操作。像这样:
$(this).closest('div').find('.hiden').toggle();
这是一个例子,因为我不知道服务器端代码产生的渲染标记。本质上,.closest()
中的选择器应该引用任何父元素包装标记中的特定datalist项。这基本上寻找:被点击的元素 - &gt;它与您要切换的元素之间的共同父级 - &gt;要切换的元素。
(当然,在您复制id
值的任何其他位置都需要应用此相同的修补程序,您在代码中执行了几次。)
id
必须在DOM中是唯一的。 class
可以重复使用。
答案 1 :(得分:-1)
$(document).ready(function () {
$("#hiden").hide();
$("#showddiv").on("click", function () {
$("#hiden").toggle();
});
});
你应该试试这个。
更新
应该是这样的:
<ItemTemplate>
<table cellspacing="20">
<tr>
<td>
<a href="#" class="showddiv" class="fontText" title="drop the div down"><img src='<%# Eval("Mainfoto") %>' width="320px" height="290px" /> </a>
</td>
<td width="400px">
<asp:Label ID="Label1" class="FontText" Font-Bold="true" runat="server" Text="Përshkrimi:"></asp:Label><br />
<asp:Label ID="Label2" width="400px" class="FontText" Font-Size="Large" runat="server" Text='<%# Eval("pershkrimi") %>' ></asp:Label>
</td>
</tr>
</table>
<div id="hiden" class="categorry">
</div>
</ItemTemplate>
$(document).ready(function () {
$(".categorry").hide();
$(".showddiv").on("click", function () {
$(this).closest('table').parent().find(".categorry").toggle();
});
});