Показать / скрыть div в DataList с помощью Jquery

0

и я сделал проект с 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>'
Теги:
datalist

2 ответа

0
Лучший ответ

Вы повторно используете значения 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 может быть повторно использован.

Поделиться
  • 0
    Но этот ответ, кстати, тоже не применим. Он будет отображать скрытые div от всех элементов списка данных.
  • 0
    @IrfanTahirKheli: Хороший улов. Я обновил ответ, чтобы отразить это.
0 
$(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();
    });
});
Поделиться
  • 0
    Чем это отличается от того, что уже делает ОП?
  • 0
    Там нет никакой разницы в обоих. Я просто прошу попробовать это так, потому что я не вижу никакой другой проблемы в коде. @David
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню