0

折りたたみ可能なセットを示す動的リストがあります。id="selection_product_info_xxxx" xxxx=動的な製品 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をハードコーディングする代わりに、製品IDを動的に機能させ、製品の下に関連するdivを展開する次のスクリプトを書き直す方法を知っている人はいますか?

備考: 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");})
4

1 に答える 1

0

更新 あなたが与えたパターンを維持できなかったので、あなたの新しい情報から、これはうまくいきません:

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/

于 2014-02-11T11:39:02.993 に答える