0

「li」からクラスを削除しようとしていますが、うまくいきません。これが私の機能です：

function setStore($s, id, name) {
    //alert("length: " + $s.parents('ul.popup-cbo-menu').find('li.selected').length);
    $s.parents('ul.popup-cbo-menu').find('li.selected').removeClass('selected');
    //alert("length: " + $s.parents('ul.popup-cbo-menu').find('li.selected').length);

    //$s.parent('li').addClass('selected');
    $('#cboStores').val(name);
}

アラートを入れることで「選択」が解除されていることが確認できます。しかし、何らかの理由で、実際の「li」には影響しません。

jsfiddle は次のとおりです: http://jsfiddle.net/87xswem7/9/。しかし、何らかの理由で、jsFiddle は setStore() 関数を見つけることができません。

ポップオーバーを作成する方法は次のとおりです。

$(document).ready(function () {
    $("#cboStores").popover({
        viewport: 'body',
        trigger: 'click',
        placement: 'bottom',
        html: true,
        content: '<ul class="popup-cbo-menu">' +
                 '   <li><a href="#" onclick="setStore($(this), -1, \'All Stores\')">All Stores</a></li>' + 
                 '   <li class="selected"><a href="#" onclick="setStore($(this), 1, \'My Foot\')">My Foot</a></li>' +
                 '   <li><a href="#" onclick="setStore($(this), 2, \'My Foot 1\')">My Foot 1</a></li>' +
                 '</ul>',
        template: '<div class="popover cont-popup-cbo-menu" role="tooltip">' +
                  '   <div class="arrow"></div><h3 class="popover-title"></h3>' +
                  '   <div class="popover-content"></div>' +
                  '</div>'
    }).blur(function () {
        $(this).popover('hide');
    });
});

そして、これがhtmlの私の入力ボックスです:

<input type="text" id="cboStores" value="My Foot" />
4

3 に答える 3

2

あなたが抱えている主な問題は、setStore 関数を使用して、通常 DOM に存在すると仮定してポップオーバーのコンテンツを変更しようとしていることです。

function setStore($s, id, name) {
    //alert("length: " + $s.parents('ul.popup-cbo-menu').find('li.selected').length);
    $s.parents('ul.popup-cbo-menu').find('li.selected').removeClass('selected');
    //alert("length: " + $s.parents('ul.popup-cbo-menu').find('li.selected').length);

    //$s.parent('li').addClass('selected');
    $('#cboStores').val(name);
}

ただし、ポップオーバーのコンテンツは、定義どおりに、期待どおりに DOM に存在しません。コンテンツは実際にはポップオーバーのプロパティであり、次のようにログに記録できます。

console.log($("#cboStores").data('bs.popover').options.content)

ここで、やりたいことを行うには、ポップオーバーの内容を動的に変更できる必要があります。

これを行うために参照した投稿を次に示します。Bootstrap ポップオーバー コンテンツは動的に変更できません

だから、私がしたことは、JavaScript から HTML コンテンツのセマンティクスを削除し、それを HTML に直接配置して、JavaScript で操作できるようにすることです。

<input type="text" id="cboStores" placeholder="Select Store" value="My Foot" style="width:150px;height:30px;" />

<div id="popoverContent" class="hidden">
    <ul class="popup-cbo-menu">
        <li><a href="#" onclick="setStore($(this), -1, 'All Stores')">All Stores</a></li>
        <li class="selected"><a href="#" onclick="setStore($(this), 1, 'My Foot')">My Foot</a></li>
        <li><a href="#" onclick="setStore($(this), 2, 'My Foot 1')">My Foot 1</a></li>
    </ul>
</div>

ポップオーバー コンテンツを参照するために使用される非表示の div ですべてをラップしていることに注意してください。新しい setStore 関数は次のようになります。

function setStore($s, id, name) {                                                               
    $('#popoverContent').find('li.selected').removeClass('selected');
    $('#popoverContent').find('a').filter(function(){
        return $(this).text() === $s[0].innerHTML;
    }).parent().addClass('selected');
    $('#cboStores').val(name);
    $("#cboStores").data('bs.popover').options.content = $('#popoverContent').html();
}

また、JavaScript でのポップオーバーの初期化におけるポップオーバー コンテンツは次のように変更されます。

$('#popoverContent').html()

このように、実際に行っていることは、HTML のコンテンツを変更してから、HTML の変更を反映するようにポップオーバーのコンテンツを設定することです。

フィドル: http://jsfiddle.net/87xswem7/12/

于 2015-10-12T16:22:42.427 に答える
1

なぜだか知っているよ：

フィドルについては、JS を onload で既にラップしています。

ここに画像の説明を入力

ただし、もう一度実行します。

$(document).ready(function () {
  //...
}

その必要はありません。ラップなしに変更するだけです。

ここに画像の説明を入力

于 2015-10-12T14:58:54.643 に答える