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

我可以通过发出警报来确认 "selected" 已被删除。但由于某种原因，它不会影响实际的 "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" />

Answer 1

使用

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 2

我知道为什么：

对于您的 fiddle，您已经将 JS 包装在 onload 中：

然而，你再做一次：

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

没有那个必要。只需将其更改为无包装即可。

Answer 3

您遇到的主要问题是您正在尝试使用 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)

现在，为了执行您想要的操作，您必须能够动态修改弹出框的内容。

这是我参考的 post 来做到这一点：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 中，它将用于引用弹出窗口内容。现在，新的 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中popover初始化中的popover内容修改为：

$('#popoverContent').html()

这样，您实际做的是修改 HTML 的内容，然后设置弹出窗口的内容以反映 HTML.

中的更改

Fiddle: http://jsfiddle.net/87xswem7/12/

jQuery removeClass 似乎不起作用

jQuery removeClass seems not to work

jquery

twitter-bootstrap-3

bootstrap-popover