Fatal编程技术网
  • csharp/
  • C# 为什么我的中继器出现切换问题？

C# 为什么我的中继器出现切换问题？

c# jquery asp.net

C# 为什么我的中继器出现切换问题？,c#,jquery,asp.net,toggle,C#,Jquery,Asp.net,Toggle,我有一个中继器，里面有一个div和按钮。 但正如您所知，在中继器中，ID是更改的。像 ctl00\u内容占位符1\u rptToogle ctl00\u内容占位符1\u rptToogle\uctl01\u bNToogle ctl00\u内容占位符1\u rptToogle\uctl02\u bNToogle 那个代码是有效的，但它对所有人都有效。我的意思是当我点击每一个div的时候。 我只想打开我选择的，不是所有的。我怎样才能修好它 <script type="text/javascr

我有一个中继器，里面有一个div和按钮。 但正如您所知，在中继器中，ID是更改的。像
ctl00\u内容占位符1\u rptToogle ctl00\u内容占位符1\u rptToogle\uctl01\u bNToogle ctl00\u内容占位符1\u rptToogle\uctl02\u bNToogle

那个代码是有效的，但它对所有人都有效。我的意思是当我点击每一个div的时候。 我只想打开我选择的，不是所有的。我怎样才能修好它

<script type="text/javascript">
    $(document).ready(function () {
        $('[id*="btnToogle"]').click(function () {
            $('[id*="divToogle"]').slideToggle(100);
            return false;
        });
    });
</script>

<asp:Repeater id="rptToogle" runat="server">
    <ItemTemplate>
        <asp:Button id="btnToogle" runat="server" Text=""></asp:Button>
        <div id="divToogle" runat="server" style="display:none;">
             asdasd, asdasd, asdasd
        </div>
    </ItemTemplate>
</asp:Repeater>


$（文档）.ready（函数（）{
$（'[id*=“btnToogle”]'）。单击（函数（）{
$（'[id*=“divToogle”]'）。滑动切换（100）；
返回false；
});
});
asdasd，asdasd，asdasd
使用rptToogle\u ItemBound方法并根据下面的示例修改代码

    protected void rptToogle_ItemBound(Object Sender, RepeaterItemEventArgs e)
    {
        try
        {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            DataRowView drv = (DataRowView)e.Item.DataItem;
            int year = Convert.ToInt32(drv["Year"]);
            Panel pnl = (Panel)e.Item.FindControl("pnlToggle");
        // Your code

        }
            }
        catch (Exception ex)
        {
            throw ;
        }
    }


    <asp:Repeater id="rptToogle" runat="server" OnItemDataBound="rptToggle_ItemBound">
        <ItemTemplate>
            <asp:Button id="btnToogle" runat="server" Text=""></asp:Button>
               <asp:Panel ID="pnlToggle" runat="server" Visible="false">

                 //Use Panel as this also need unique ID for your code to work properly
                </asp:Panel>

        </ItemTemplate>
    </asp:Repeater>

protectedvoid rptToogle\u ItemBound（对象发送方，RepeaterItemEventArgs e）
{
尝试
{
如果（e.Item.ItemType==ListItemType.Item | | e.Item.ItemType==ListItemType.AlternatingItem）
{
DataRowView drv=（DataRowView）e.Item.DataItem；
整数年=转换为32（drv[“年]）；
Panel pnl=（Panel）e.Item.FindControl（“pnlToggle”）；
//你的代码
}
}
捕获（例外情况除外）
{
投
}
}
//使用面板，因为这也需要唯一的ID才能使代码正常工作
修改脚本，这将生成唯一的按钮id&将仅为特定按钮事件启动脚本

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= btnToogle.ClientID %>").click(function () {
            $("#<%= pnlToogle.ClientID %>").slideToggle(100);
            return false;
        });
    });
</script>


$（文档）.ready（函数（）{
$（“#”）单击（函数（）{
$（“#”）滑动切换（100）；
返回false；
});
});
使用rptToogle\u ItemBound方法并根据下面的示例修改代码

    protected void rptToogle_ItemBound(Object Sender, RepeaterItemEventArgs e)
    {
        try
        {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            DataRowView drv = (DataRowView)e.Item.DataItem;
            int year = Convert.ToInt32(drv["Year"]);
            Panel pnl = (Panel)e.Item.FindControl("pnlToggle");
        // Your code

        }
            }
        catch (Exception ex)
        {
            throw ;
        }
    }


    <asp:Repeater id="rptToogle" runat="server" OnItemDataBound="rptToggle_ItemBound">
        <ItemTemplate>
            <asp:Button id="btnToogle" runat="server" Text=""></asp:Button>
               <asp:Panel ID="pnlToggle" runat="server" Visible="false">

                 //Use Panel as this also need unique ID for your code to work properly
                </asp:Panel>

        </ItemTemplate>
    </asp:Repeater>

protectedvoid rptToogle\u ItemBound（对象发送方，RepeaterItemEventArgs e）
{
尝试
{
如果（e.Item.ItemType==ListItemType.Item | | e.Item.ItemType==ListItemType.AlternatingItem）
{
DataRowView drv=（DataRowView）e.Item.DataItem；
整数年=转换为32（drv[“年]）；
Panel pnl=（Panel）e.Item.FindControl（“pnlToggle”）；
//你的代码
}
}
捕获（例外情况除外）
{
投
}
}
//使用面板，因为这也需要唯一的ID才能使代码正常工作
修改脚本，这将生成唯一的按钮id&将仅为特定按钮事件启动脚本

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= btnToogle.ClientID %>").click(function () {
            $("#<%= pnlToogle.ClientID %>").slideToggle(100);
            return false;
        });
    });
</script>


$（文档）.ready（函数（）{
$（“#”）单击（函数（）{
$（“#”）滑动切换（100）；
返回false；
});
});
试试这个。。。使用
$（this）
而不是
$（'[id*=“divToogle”]'）
在
中单击


<script type="text/javascript">
    $(document).ready(function () {
        $('[id*="btnToogle"]').click(function () {
            $(this).slideToggle(100);
            return false;
        });
    });
</script>




$（文档）.ready（函数（）{
$（'[id*=“btnToogle”]'）。单击（函数（）{
$（此）.slideToggle（100）；
返回false；
});
});

试试这个。。。使用
$（this）
而不是
$（'[id*=“divToogle”]'）
在
中单击


<script type="text/javascript">
    $(document).ready(function () {
        $('[id*="btnToogle"]').click(function () {
            $(this).slideToggle(100);
            return false;
        });
    });
</script>




$（文档）.ready（函数（）{
$（'[id*=“btnToogle”]'）。单击（函数（）{
$（此）.slideToggle（100）；
返回false；
});
});

您可以使用
下一步
方法：


$(document).ready(function () {
    $('[id*="btnToogle"]').click(function() {
        $(this).next().slideToggle(100);
        return false;
    });
});



您可以使用
next
方法：


$(document).ready(function () {
    $('[id*="btnToogle"]').click(function() {
        $(this).next().slideToggle(100);
        return false;
    });
});



您正在使用id=“divToggle”创建多个div。从技术上讲，您确实不应该这样做，因为使用相同ID的不同DOM元素是无效的（尽管浏览器允许这样做）

您可以使用$（this）选择当前按钮，然后利用jquery的next（）选择器获得按钮旁边的div，如下所示：


<script type="text/javascript">
    $(document).ready(function () {
       $('[id*="btnToogle"]').click(function () {
            //select the very next sibling of this button, which we know is the div
            $(this).next().slideToggle(100);
            return false;
        });
    });
</script>




$（文档）.ready（函数（）{
$（'[id*=“btnToogle”]'）。单击（函数（）{
//选择这个按钮的下一个同级，我们知道它是div
$（this.next（）.slideToggle（100）；
返回false；
});
});



但是，请注意，如果开始编辑标记，使用next（）可能会很危险，因为它是相对选择器，而不是绝对选择器（它获取下一个元素，而不是id指定的特定元素）。
您正在使用id=“divToggle”创建多个div。从技术上讲，您确实不应该这样做，因为使用相同ID的不同DOM元素是无效的（尽管浏览器允许这样做）

您可以使用$（this）选择当前按钮，然后利用jquery的next（）选择器获得按钮旁边的div，如下所示：


<script type="text/javascript">
    $(document).ready(function () {
       $('[id*="btnToogle"]').click(function () {
            //select the very next sibling of this button, which we know is the div
            $(this).next().slideToggle(100);
            return false;
        });
    });
</script>




$（文档）.ready（函数（）{
$（'[id*=“btnToogle”]'）。单击（函数（）{
//选择这个按钮的下一个同级，我们知道它是div
$（this.next（）.slideToggle（100）；
返回false；
});
});



但是，请注意，如果开始编辑标记，使用next（）可能会很危险，因为它是相对选择器，而不是绝对选择器（它获取下一个元素，而不是id指定的特定元素）.
您不能单击隐藏元素。您不能单击隐藏元素。我修改了我的答案，以防您更早看到。我修改了我的答案，以防您更早看到。确切地说，id也是唯一的。但在页面呈现后，它会发生变化。因为它在中继器里。您的代码不起作用。@kad1r是的，因为我建议使用类。如果您的标记id相同，这会使您的文档无效，请尝试更新的代码。确切地说，id也是唯一的。但在页面呈现后，它会发生变化。因为它在中继器里。您的代码不起作用。@kad1r是的，因为我建议使用类。在您的标记中，ID是相同的