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">

由于这本质上是在一个循环（中继器、数据列表等）内，因此它将多次呈现到页面。代替 a id，使用 a class：

<div class="hiden categorry">

然后只需更改您的 jQuery 选择器：

$('.hiden')

当然，现在您还需要具体确定要切换的元素。您可以通过从单击的元素稍微遍历 DOM 来做到这一点。像这样的东西：

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

这是一个示例，因为我不知道您的服务器端代码生成的渲染标记。本质上，选择器.closest()应该引用标记中包含该特定数据列表项的任何父元素。这基本上是在寻找：被点击的元素->它与要切换的元素之间的共同父级->要切换的元素。

（当然，同样的修复将需要应用到您复制id值的任何其他地方，您在代码中执行了几次。）

ids 在 DOM 中必须是唯一的。 classes 可以重复使用。

于 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 回答