0

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>`
4

2 に答える 2

0

idHTML で値を再利用しています。これは無効なマークアップであり、未定義の動作につながる可能性があります (おそらくブラウザーによっても異なります)。次の要素に注意してください。

<div id="hiden" class="categorry">

これは本質的にループ (リピーター、データリストなど) 内にあるため、ページに複数回レンダリングされます。の代わりに、idを使用しclassます。

<div class="hiden categorry">

次に、jQuery セレクターを変更します。

$('.hiden')

もちろん、切り替えたい要素を具体的に特定する必要もあります。これを行うには、クリックした要素から DOM を少しトラバースします。このようなもの：

$(this).closest('div').find('.hiden').toggle();

これは一例です。サーバー側のコードの結果としてレンダリングされたマークアップがわからないためです。基本的に、セレクターは、.closest()その特定のデータリスト項目をマークアップでラップする親要素を参照する必要があります。これは基本的に次を探します: クリックされた要素 -> その要素と切り替えたい要素の間の共通の親 -> 切り替えたい要素。

(当然、この同じ修正を、値を複製している他の場所に適用する必要があります。idこれは、コード内で数回行います。)

ids は DOM 内で一意である必要があります。 class再利用できます。

于 2013-09-23T16:59:51.067 に答える
-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();
    });
});
于 2013-09-23T16:59:12.847 に答える