0

大家好，我想动态设置 jquery id 和 listview div id 我在互联网上查看过，没有任何好的例子。

    <script>
        $(function () {
    // I need to set the #accLstViewInner to #accLstViewInner + itemID
            $("#accLstViewInner").accordion({
                collapsible: true, active: false
            });
        });
    </script>

并设置

     <asp:ListView ID="lstAccordionViewInner" Runat="server" >
        <LayoutTemplate>
            // set the div below to #accLstViewInner + itemID as well
            <div id="accLstViewInner">

任何好的资源或想法链接？

谢谢

4

1 回答 1

0

您提到的代码中没有动态的东西。通常的做法是使用两个列表视图（或中继器）来生成代码或直接在选择器或 js 变量中从对象输出结果。

我假设你从代码隐藏中提供类似的东西

lstAccordionViewInner.DataSource = someListObject;
lstAccordionViewInner.DataBind();

举个例子

class someList
{
    public int Id { get; set; }
    public string Name { get; set; }
}

// and an example instance, should be put in a property if you want to access it from your aspx-code
var someListObject = new List<someList>()
{
    new someList() {Id = 1, Name = "#accLstViewInner"},
    new someList() {Id = 2, Name = "#accLstViewInner"},
    new someList() {Id = 3, Name = "#accLstViewInner"},
    new someList() {Id = 4, Name = "#accLstViewInner"},
    new someList() {Id = 5, Name = "#accLstViewInner"}
};

string jqueryResult = someListObject.Aggregate(string.Empty, (current, item) => current + string.Concat(item.Name, "_", item.Id, item == someListObject.Last() ? string.Empty : ", "));
// #accLstViewInner_1, #accLstViewInner_2, #accLstViewInner_3, #accLstViewInner_4, #accLstViewInner_5

这个结果你可以直接在你的 jQuery 选择器中使用

$('<%=someListObject.Aggregate(string.Empty, (current, item) => current + string.Concat(item.Name, "_", item.Id, item == someListObject.Last() ? string.Empty : ", "));%>').accordion({
    collapsible: true, active: false
});

当页面被渲染时，这将变成

$('#accLstViewInner_1, #accLstViewInner_2, #accLstViewInner_3, #accLstViewInner_4, #accLstViewInner_5').accordion({
    collapsible: true, active: false
});

但是，既然你有这种模式，我会说做这么多工作只是为了构建一个选择器是愚蠢的，除非你想要极端控制。改用通配符

$("[id^=accLstViewInner]").accordion({
    collapsible: true, active: false
});

要处理列表视图...

 <asp:ListView ID="lstAccordionViewInner" Runat="server" >
    <LayoutTemplate>
        // set the div below to #accLstViewInner + itemID as well
        <div id='accLstViewInner_<%#Eval("Id") %>' />'>
        // or possibly
        <div id='accLstViewInner_<%#DataBinder.Eval(Container.DataItem, "Id")%>' />'>
        // ...
        <div id='accLstViewInner_<% DataBinder.Eval(Container.DataItem("Id"))%>' />'>
于 2013-11-15T23:30:56.873 回答