Question

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

我正在尝试创建一个按钮或可点击的超链接，这将导致聊天窗口（实时聊天支持）出现。单击它的按钮时会出现聊天窗口，但我想创建一个单独的“单击此处”链接来控制它。如何更改包含多个类的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';
});

Answer 1

首先，添加

)};

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

.addClass();

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

也是如此。

.removeClass();

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

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

并将其删除

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

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

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

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

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

同时检查你的逻辑，你正在删除一些类并将它们添加回同一事件。

Answer 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()。

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

3 个答案: