0

Twitter Bootstrap ウィザードには 2 つのボタンがあります。

<div class="form-actions">
    <div class="row">
        <div class="col-sm-12">
            <ul class="pager wizard no-margin">
                <!--<li class="previous first disabled">
                <a href="javascript:void(0);" class="btn btn-lg btn-default"> First </a>
                </li>-->
                <li class="previous disabled">
                        <a id="prev" href="javascript:void(0);" class="btn btn-lg btn-default"> Previous </a>
                </li>
                <!--<li class="next last">
                <a href="javascript:void(0);" class="btn btn-lg btn-primary"> Last </a>
                </li>-->
                <li class="next" id="skip">
                        <a id="skip" href="javascript:void(0);" class="btn btn-lg txt-color-darken"> Skip </a>
                </li>
                <li class="next" id="next">
                        <a id="next" href="javascript:void(0);" class="btn btn-lg txt-color-darken"> Next </a>
                </li>
                 <li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
                 <input type='button' class='btn button-last btn-default' style="display:none;" name='last' value='Skip GG setup' />
            </ul>
        </div>
    </div>
</div>

そのため、Bootstrap ウィザードには と呼ばれる機能がありますonNext。この関数では、ユーザーがクリックしてこのイベントをトリガーしたボタンを見つけようとしています。以下のコードに示すように何かを試しましたが、実際には機能しません。

$('#bootstrap-wizard-1').bootstrapWizard({
    'tabClass': 'form-wizard',
    'onNext': function (tab, navigation, index) {
        $("li.next").click(function() {
            var id = "";
            id = this.id; // or alert($(this).attr('id'));
            alert(id);
        });
    });
});
4

2 に答える 2

0

クリック ハンドラー関数を削除する必要があります。クリックしたタブのインデックスを取得できます。HTML が正確でないか、完全ではありません。ドキュメントを確認してください。

このjsfiddleの例を確認してください。

更新: この方法で ID を取得します。ジャスフィドル

$('#bootstrap-wizard-1').bootstrapWizard({
    'tabClass': 'form-wizard',
    'onNext': function (tab, navigation, index) {
        //
    }
});

$("li.next").click(function(event) {
    console.log(event.target.id);   // get the id
});
于 2014-06-17T00:30:59.783 に答える
0

現在、ウィザードのドキュメントにアクセスできませんが、次のことを行う必要があると思います。

'onNext': function (tab, navigation, index) {
    var id = $(tab).attr('id');
    alert(id);
}

それでもうまくいかない場合は、おそらくインデックスを使用して取得できます。

'onNext': function (tab, navigation, index) {
    var id = $('.wizard > li').eq(index).attr('id');
    alert(id);
}

ulセレクターとのあいまいさを避けるために、おそらく ID を配置する必要があります。

于 2014-06-17T00:36:07.927 に答える