在 ColdFusion 页面上动态创建 jQuery 选项卡

Question

希望您能就此提供一些建议。

我过去在 ColdFusion 页面上使用过多个 jQuery 选项卡，但这是第一次，我需要根据供应商的名称动态创建多个选项卡以保持它们的唯一性。

因此，我试图实现 “#ABC001” 或 “#XYZ002” 等，而不是“#Tabs”。

我认为我已经到达那里，选项卡似乎已初始化，但它们不起作用，我怀疑这可能是因为动态变量 CF 输出，或者事实上我想要做的可能根本不可能.

我收到的错误是“jQuery UI 选项卡：片段标识符不匹配”，我认为这可能是变量名导致的。

我附上了我认为问题可能出在哪里的屏幕截图。抱歉，但我不知道如何添加代码，因为它似乎把它砍掉了。我附上了一张图片。预先感谢您的浏览。

Answer 1

我添加了 2 美分，与你的代码过于复杂有关。

• 摆脱

  <cfloop>

• 删除所有单独的

  <cfoutput>

  标签
• 摆脱所有变量赋值。

您有一个按

name

分组的重复 HTML 结构，因此请将其与

<cfoutput>

:

一起使用

<cfscript>
    myQuery = queryNew(
        "id,name,amount"
        , "Integer,Varchar,Integer"
        , [
            {id=1, name="ABC001", amount=15}
            , {id=2, name="XYZ002", amount=18}
            , {id=3, name="PRA003", amount=32}
        ]
    );
</cfscript>

<cfoutput query="myQuery" group="name">

    <h1>#myQuery.name#</h1>

    <div id="#myQuery.name#">
        <ul>
            <li><a href="###myQuery.name#-1">Tab 1</a></li>
            <li><a href="###myQuery.name#-2">Tab 2</a></li>
        </ul>
        <div id="#myQuery.name#-1">
            Tab 1 Div.
        </div>
        <div id="#myQuery.name#-2">
            Tab 2 Div.
        </div>
    </div>
    
</cfoutput>

渲染的 HTML 包含所有正确的唯一 HTML

id

和相关

href

值。添加您已有的 JavaScript，选项卡应该正确呈现并运行。

<h1>ABC001</h1>

<div id="ABC001">
    <ul>
        <li><a href="#ABC001-1">Tab 1</a></li>
        <li><a href="#ABC001-2">Tab 2</a></li>
    </ul>
    <div id="ABC001-1">
        Tab 1 Div.
    </div>
    <div id="ABC001-2">
        Tab 2 Div.
    </div>
</div>

<h1>XYZ002</h1>

<div id="XYZ002">
    <ul>
        <li><a href="#XYZ002-1">Tab 1</a></li>
        <li><a href="#XYZ002-2">Tab 2</a></li>
    </ul>
    <div id="XYZ002-1">
        Tab 1 Div.
    </div>
    <div id="XYZ002-2">
        Tab 2 Div.
    </div>
</div>

<h1>PRA003</h1>

<div id="PRA003">
    <ul>
        <li><a href="#PRA003-1">Tab 1</a></li>
        <li><a href="#PRA003-2">Tab 2</a></li>
    </ul>
    <div id="PRA003-1">
        Tab 1 Div.
    </div>
    <div id="PRA003-2">
        Tab 2 Div.
    </div>
</div>