2

次のポップオーバー設定があります。

ポップオーバーアイコンランチャー

 <label id="settings-layout" class="icon-th" rel="popover" data-original-title="Switch Layout"></label>

ポップオーバーコンテンツ

<div id="settings-layout-content" style="display:none;">
                                 <ul style='margin-left:5px;' >
        <li class='popover-list layout-list' data-id="badge">

            <label class='icon-ok' style='color:#6ABD3D !important;position:relative;right:5px;'></label>
            <label class='icon-th' style='position:relative; top:1px;right:4px;'></label>Badge
           </li>

        <li class='popover-list layout-list' data-id="table">

            <label class='icon-ok' style='color:#6ABD3D !important;position:relative;right:5px;'></label>
            <label class='icon-table' style='position:relative; top:1px;right:4px;'></label>Table

        </li>

    </ul>
   </div>

*ポップオーバーにコンテンツを割り当てるスクリプト

$('.icon-th').popover({
            html: true, placement: 'bottom',
            trigger: 'manual', content: function () { return $('#settings-layout-content').html(); }
        }).click(function (e) {
            $('.icon-font').popover('hide');
            $('.icon-filter').popover('hide');
            $(this).popover('toggle');
            e.stopPropagation();
        });

ここで、ポップオーバーのコンテンツ内のliの1つをクリックすると、コンテンツを次のように変更します。

$('.layout-list').live('click', function () {


            $(this).find(">:first-child").addClass("display");

        });

これは正常に機能します。しかし、ポップオーバーを閉じてアイコンをクリックしてポップオーバーを再度表示すると、変更は保持されません。

任意の提案をいただければ幸いです。

4

1 に答える 1

2

ここでの問題は、#settings-layout-contenthtml のコピーを Popover プラグインに送信して表示することです。ポップアップのリスト項目をクリックすると、コピーされた要素に変更が適用され、ポップアップが閉じられると、それらの要素は破棄されます。

変更を保持するには、ポップアップ コンテンツにコピーする元の要素に変更を適用する必要があります。

// .live() is deprecated, use .on() instead
$(document).on('click', '.layout-list', function () {

    // get clicked item index used to matched the same element in the original content
    var itemIndex = $(this).index();

    // get original element that holds the popover content
    var orig = $('#settings-layout-content').find('.layout-list:eq(' + itemIndex + ')');

    // add the class to the original content
    orig.children(":first").addClass("display");

    // close the popover
    $('#settings-layout').popover('hide');
});

また、 .live()は非推奨です。今後は.on()を使用することをお勧めします。

これがどのように機能するかのデモです：http://jsfiddle.net/ZdJUC/1/

于 2012-10-28T11:43:46.193 に答える