Показать/скрыть div в DataList с JQuery

Question

и я сделал проект с 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>` 

Answer 1

Вы повторно используя 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 s должны быть уникальными в DOM. class es можно повторно использовать.

Answer 2

$(document).ready(function() { 
    $("#hiden").hide(); 

    $("#showddiv").on("click", function() { 
     $("#hiden").toggle(); 
    }); 
}); 

Вы должны попробовать это.

Update:

Должно быть что-то вроде этого:

<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(); 
    }); 
});