如何在可折叠集中为 Jquerymobile 动态 ID 添加 JS

Question

我有一个显示可折叠集的动态列表。它将生成 id="selection_product_info_xxxx" xxxx=dynamic product id 的不同集合。

                        <div data-role="navbar">
                            <ul>
                                <li><a href="#" id="expand_product_info_810" data-theme="c" class="ui-btn-active"><font class="tab_font02">Product 810 Info</font></a></li>
                                <li><a href="#" id="expand_product_info2_810" data-theme="c" ><font class="tab_font02">Product 810 Info 2</font></a></li>
                            </ul>
                        </div>   
                        <!-- Tab End -->

                            <div data-role="collapsible-set">
                                <!-- Tab01 Start -->
                                <div data-role="collapsible" id="selection_product_info_810" data-collapsed="false">
                                    <h3 class="display-none">product 810 info</h3>
                                    <div>Test</div>
                                </div>
                                <!-- Tab01 End -->
                                <!-- Tab02 Start -->
                                <div data-role="collapsible" id="selection_product_info2_810">
                                    <h3 class="display-none">product 810 info 2</h3>
                                    <div>text 2</div>
                                </div>
                                <!-- Tab02 End -->     
                            </div>
                        <div data-role="navbar">
                            <ul>
                                <li><a href="#" id="expand_product_info_820" data-theme="c" class="ui-btn-active"><font class="tab_font02">Product 820 Info</font></a></li>
                                <li><a href="#" id="expand_product_info2_820" data-theme="c" ><font class="tab_font02">Product 820 Info 2</font></a></li>
                            </ul>
                        </div>   
                        <!-- Tab End -->

                            <div data-role="collapsible-set">
                                <!-- Tab01 Start -->
                                <div data-role="collapsible" id="selection_product_info_820" data-collapsed="false">
                                    <h3 class="display-none">product 820 info</h3>
                                    <div>Test</div>
                                </div>
                                <!-- Tab01 End -->
                                <!-- Tab02 Start -->
                                <div data-role="collapsible" id="selection_product_info2_820">
                                    <h3 class="display-none">product 820 info 2</h3>
                                    <div>text 2</div>
                                </div>
                                <!-- Tab02 End -->     
                            </div>

为了使按钮工作，现在我需要通过硬编码所有产品 ID 在 javascript 中添加如下事件。有人知道我如何重写以下脚本，使产品 id 动态工作并扩展产品下的相关 div，而不是对产品 id 进行硬编码吗？

备注：我们使用的是 jquery.mobile-1.3.2 和 jquery-1.9.1.min.js

$("#expand_product_info_810") .on("click", function() {$("#selection_product_info_810").trigger("expand");})
$("#expand_product_info_820") .on("click", function() {$("#selection_product_info_820").trigger("expand");})
$("#expand_product_info2_810") .on("click", function() {$("#selection_product_info2_810").trigger("expand");})
$("#expand_product_info2_820") .on("click", function() {$("#selection_product_info2_820").trigger("expand");})

Answer 1

更新 根据您的新信息，这无法正常工作，因为您无法保持您提供的模式：

id="selection_product_info_xxxx" xxxx=动态

应该是：

id="selection_product_infox_xxxx" x_xxxx=动态

所以！那你必须这样做！

$("a[id^='expand_product']").on("click", function(){
    var tmp = $(this).attr("id").split("_");
    var id = tmp[2] + "_" + tmp[3];
    $("#selection_product_" + id).trigger("expand");
});

http://jsfiddle.net/rb9Rv/

如果你可以控制生成的 HTML，这会更聪明：

<ul>
    <li><a data-tab="info_810" class="clickButton ui-btn-active" href="#" id="expand_product_info_810" data-theme="c" ><font class="tab_font02">Product 810 Info</font></a></li>
    <li><a data-tab="info2_810" class="clickButton" href="#" id="expand_product_info2_810" data-theme="c" ><font class="tab_font02">Product 810 Info 2</font></a></li>
</ul>


$("a.clickButton").on("click", function(){
    $("#selection_product_" + $(this).attr("data-tab")).trigger("expand");
});

http://jsfiddle.net/ctMtA/

---

假设那个按钮是<button>，你可以这样做：

$("button[id^='expand_product_info_']").on("click", function(){
    var id = $(this).attr("id").split("_")[3];
    $("#selection_product_info_" + id).trigger("expand");
});

如果还是不行，你必须做一些调试，像这样：

$("a[id^='expand_product_info_']").on("click", function(){
    alert("click works!");
    var id = $(this).attr("id").split("_")[3];
    alert(id);
    $("#selection_product_info_" + id).trigger("expand");
});

我为你做了一个快速的小提琴，但触发器扩展不起作用，也像你说的那样使用固定的 id。这似乎在 1.4 版本中有所改变，如果你有 1.4，试试这个：

$("a[id^='expand_product_info_']").on("click", function(){
    var id = $(this).attr("id").split("_")[3];
    $("#selection_product_info_" + id).collapsible("expand");
});

工作小提琴： http://jsfiddle.net/5pyvy/2/