jQuery removeClass似乎不工作

Question

我想從「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); 
} 

我可以證實，「選擇」是通過把警報刪除。但由於某種原因，它並不影響實際的「李」。

這裏是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" /> 

Answer 1

您遇到的主要問題是，你想用你的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 popover content cannot changed dynamically

所以，我所做的就是從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中，用於引用popover內容。現在，新的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/

Answer 2

使用

setStore = function($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); 
} 

而不是

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); 
} 

它解決了我(fiddle)

Answer 3

我知道爲什麼：

爲了您的小提琴，你已經做完了JS在onload：

然而，你再這樣做：

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

這是沒有必要的。只需將其更改爲無包裝即可。