и я сделал проект с asp, но что-то не работает... Я пытаюсь показать/скрыть div, который находится внутри Datalist. Но, к сожалению, работает только в первом элементе, а остальные элементы - 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>'
Вы повторно используете значения id
в своем HTML. Это недопустимая разметка и, скорее всего, приведет к неопределенному поведению (возможно, иному браузером). Обратите внимание на этот элемент:
<div id="hiden" class="categorry">
Поскольку это по существу внутри цикла (ретранслятор, datalist и т.д.), Он будет многократно отображать страницу. Вместо id
используйте class
:
<div class="hiden categorry">
Затем просто измените селектор jQuery:
$('.hiden')
Конечно, теперь вам также нужно конкретно определить, какой элемент вы хотите переключить. Вы можете сделать это, немного переместив DOM из элемента с щелчком. Что-то вроде этого:
$(this).closest('div').find('.hiden').toggle();
Это пример, так как я не знаю рендеринговую разметку, полученную из вашего кода на стороне сервера. По существу, селектор в .closest()
должен ссылаться на любой родительский элемент, который обертывает этот конкретный элемент данных в разметке. Это в основном ищет: элемент, который был нажат → общий родительский элемент между ним и элементом, который вы хотите переключить, → элемент, который вы хотите переключить.
(Естественно, это же исправление должно применяться везде, где вы дублируете значения id
, которые вы делаете пару раз в своем коде.)
id
должен быть уникальным в DOM. class
es может быть повторно использован.
$(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();
});
});