Question

当我使用jQuery向div添加类时，我遇到了问题：这样做时，我还需要向<body>添加一些样式。

我有这样的事情：

<body>
.....
<div="class-one"></div>

我知道如何使用.class-one事件处理程序使用jQuery向click添加一个类，但同时我需要将overflow: hidden添加到<body>！
我的jQuery代码是：

$('body').on('click', '.button', function () {
    $(".class-one").toggleClass("active");
});

没关系，但是如何在<body>上切换.active课后向.class-one添加样式？我的意思是如果.class-one获得“有效”，那么<body>应该获得overflow:hidden。

谢谢！

Answer 1

你可以像这样给jQuery和css：

$('body').on('click', '.button', function () {
     $(".class-one").toggleClass("active");
     $("body").toggleClass("overflow");
});

body.overflow{
  overflow:hidden;
}

Answer 2

使用this关键字。这里我展示了如何在点击时更改元素的样式。

$('body').on('click', '.button', function () {
       $(".class-one").toggleClass("active");
       $(this).css('background-color', '#ff0000');
    });

而不是点击，我想建议鼠标悬停方法

$( 'body' ).mouseover(function() {
   $(this).css('background-color', '#ff0000');
})

Answer 3

var elements = document.getElementsByClassName("class-one");
elements[0].style.display="none";

你可以使用该代码。

Answer 4

你可以尝试这个代码，当.button添加类激活然后身体溢出被隐藏，否则溢出自动。

jQuery('body').on('click', '.button', function () {
     jQuery(".class-one").toggleClass("active");
     if (jQuery('.class-one').hasClass('active')) {
        jQuery('body').css('overflow', 'hidden');
     }else{
        jQuery('body').css('overflow', 'auto');
     }
 });

Answer 5

您可以使用旗帜。如果.active最初没有.class-one，我们可以将该标记设置为false（否则设置为true）。然后在每次点击时来回切换（真/假）。如果标记为true - 则表示已添加.active类，因此请将您的样式应用于body：

var isActive = false;
$('body').on('click', '.button', function () {
   $(".class-one").toggleClass("active");
   isActive = isActive ? false : true;
   if(isActive) $('body').css("overflow", "hidden"); else $('body').css("overflow", "auto");
});

如果添加了类，jQuery会添加样式吗？

5 个答案: