如何将一个div属性类更改为多个类答案

【问题标题】：How do you change a div attribute class to multiple classes如何将一个div属性类更改为多个类
【发布时间】：2015-05-21 22:34:56
【问题描述】：

您好，这是我在这里的第一篇文章。

我正在尝试创建一个按钮或可点击的超链接，它将导致一个聊天窗口（实时聊天支持）出现。当您单击它的按钮时会出现聊天窗口，但我也想创建一个单独的“单击此处”链接来控制它。如何更改包含多个类的 div 的类属性。我尝试了下面的代码，但对我来说不行。

$(document).ready(function(){
$("button").click(function(){
    $("#jivo-label").removeClass("jivo-fixed-right jivo-animate jivo-online jivo-fade-in").addClass("jivo-fixed-right jivo-animate jivo-online");
    $("#jivo-phantom").removeClass("jivo-right jivo-phantom-label jivo-notransition").addClass("jivo-right jivo-phantom-chat");
    $("#jivo-chat").removeClass("jivo-animated jivo-online").addClass("jivo-animated jivo-online jivo-fade-in");
    document.getElementById('jivo_chat_iframe').style.display = 'block';
    document.getElementById('jivo_chat_iframe').style.visibility = 'visible';
});

【问题讨论】：

你不见了：});
.addClass() 和 .removeClass() 应该可以解决问题。什么不适合你？
我不明白。您似乎正在删除类，然后立即将它们重新添加。我认为您对语法感到困惑，但不清楚您想要什么。你到底想在你的功能中完成什么？
向我们展示您的 HTML 代码 - 此代码没有任何意义

标签： jquery html class button

【解决方案1】：

首先，添加

)};

到代码的末尾。它错过了它。其次，要添加类，请使用

.addClass();

将类添加到给定的选定标签或标签组。它需要在括号之间添加一个类名的参数（以字符串的形式）。

也是如此

.removeClass();

但它会删除给定的类。例如，要将“active”类添加到 ID 为“div1”的 div，您可以这样做

$("#div1").addClass('active');

并删除它

$("#div1").removeClass('active');

所以使用这些，编写一个函数，创建你想要的链接，然后在点击链接时调用该函数，这将通过以下方式实现：假设你的函数称为“clickLink()”。让我们假设链接的 id 是“link1”。写下这段代码：

$('#link1').click(function(){
 clickLink();
});

将您需要的代码 [利用 .addClass() 和 .removeClass()] 放入函数 clickLink() 中，并确保在调用它之前在脚本文件中定义该函数。如果您有任何问题，请发表评论，我会尽力回答。

【讨论】：

【解决方案2】：

试试这个：

$(document).ready(function(){
    $("button").click(function() {
        $("#jivo-label").removeClass("jivo-fixed-right jivo-animate jivo-online jivo-fade-in")
        $("#jivo-label").addClass("jivo-fixed-right jivo-animate jivo-online");
        $("#jivo-phantom").removeClass("jivo-right jivo-phantom-label jivo-notransition")
        $("#jivo-phantom").addClass("jivo-right jivo-phantom-chat");
        $("#jivo-chat").removeClass("jivo-animated jivo-online")
        $("#jivo-chat").addClass("jivo-animated jivo-online jivo-fade-in");
        document.getElementById('jivo_chat_iframe').style.display = 'block';
        document.getElementById('jivo_chat_iframe').style.visibility = 'visible';
        return false;
    });
});

还要检查您的逻辑，您将删除一些类并将它们添加回同一事件。

【讨论】：

【解决方案3】：

我认为 jQuery .toggleClass() 是您所需要的。例如，

$(function(){
    //bind click on button and link
    $("button, .click-me-link").click(function(){
        //add classes if they were not present and remove them otherwise
        $('.your-popup').toggleClass('visible animated'); 
    });
})

另外，如果你使用 jQuery，你可以简单地编写

$('#jivo_chat_iframe').css({'display':'block'});

而不是

document.getElementById('jivo_chat_iframe').style.display = 'block';

如果您只想显示/隐藏 iframe，那么最好的解决方案是：

$(function(){
    //bind click on button and link
    $("button, .click-me-link").click(function(){
        //show|hide iframe
        $('#jivo_chat_iframe').toggle(); 
    });
})

见.toggle()。

【讨论】：