0

ポップオーバーに表示されたオプションで行われた選択に基づいて、カスタム データ属性値を使用しようとしています。

以下の例では、「私は独身で子供はいません」というメッセージがあり、シングルをクリックすると、オプション(single / Married)とともにポップオーバーが表示されます。ユーザーが [結婚済み] をクリックした場合、I amはWe are MARRIED with no kidsに置き換えられる必要があります。

フィドル

HTML

<div>
        <span id="m-marital-status" data-single="I am" data-multiple= "We are">I am</span>
        <div class="section-input">
            <div class="popover-markup" id="marital-status"><a href="#" class="trigger">Single</a> with 
                <div class="head hide"></div>
                <div class="content hide">
                    <ul>
                      <li>married</li>
                      <li>single</li>
                    </ul>
                    <div class="footer hide">test</div>
                </div>
                <span>no Kids</span>.
            </div>
        </div>

CSS

.popover-title {
    padding: 0;
    border: 0;
}

JS

$('.popover-markup>.trigger').popover({
    html: true,
    placement: 'top',
    content: function () {
        return $(this).parent().find('.content').html();
    }

});
4

3 に答える 3

2

試す

            <ul class="marital-status">
                <li data-status="We are">married</li>
                <li data-status="I am">single</li>
            </ul>

それから

$(document).on('click', 'ul.marital-status li', function () {
    $('#m-marital-status').css('color', 'red').html($(this).data('status'));
    $('#marital-status .trigger').text($(this).text())
    $('.popover-markup>.trigger').popover('hide')
});

デモ:フィドル

于 2013-11-11T07:35:53.890 に答える
1

次のような方法で、クリック イベントをポップオーバー コンテンツにデリゲートする必要があります。

$('body').on("click", ".popover li", function() {
  // Code here
})

ここに実用的なフィドルがあります：http://jsfiddle.net/h7fVL/3/

于 2013-11-11T07:35:44.887 に答える