Question

我有以下html：

<div class="profileRowHeader">
    <i class="glyphicon glyphicon-folder-close" id="folderIcon"></i>
</div>

点击.profileRowHeader后，我想删除课程glyphicon-folder-close并将课程glyphicon-folder-open添加到#folderIcon

这就是我正在尝试的：

$('.profileRowHeader').click(function() {
    $(this).find("#folderIcon").toggleClass('glyphicon-folder-open','glyphicon-folder-close');
});

但它所做的只是添加glyphicon-folder-open类，而不是删除glyphicon-folder-close类，如下所示：

<i class="glyphicon glyphicon-folder-close glyphicon-folder-open" id="folderIcon"></i>

这是预期的行为吗？我确实需要删除它

Answer 1

列出要在一个中空格分隔的字符串切换的类：

$(this).find("#folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');
// Change is here --------------------------------------------^

toggleClass的第二个（可选）参数不是另一个要切换的类，它是一个标志：如果它是真的，toggleClass就像addClass一样。如果它是假的，toggleClass就像removeClass一样。如果它缺少，toggleClass 切换类（如果存在则删除它们，如果不存在则添加它们，逐个类别）。

Answer 2

尝试

$('.profileRowHeader').click(function() {
    $(this).find("#folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');
 });

对于这两个类，您不需要任何分隔符而不是空格。请参阅此link

Answer 3

在您的情况下，您应该使用单个字符串参数，其中的类由空格分隔：

$('#folderIcon', this).toggleClass('glyphicon-folder-open glyphicon-folder-close');

Answer 4

toggleClass为每个类提供一个字符串参数，以便用空格分隔。试试这个：

$('.profileRowHeader').click(function() {
    $(this).find("#folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');
});

toggleClass不删除第一个类

4 个答案: