jQueryはクラスが追加されたらスタイルを追加しますか？

jQueryを使用してdivにクラスを追加するときに問題が発生しました。その一方で、<body>にいくつかのスタイルを追加する必要があります。jQueryはクラスが追加されたらスタイルを追加しますか？

私はこのようなものがあります：

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

を、私はjQueryのclickイベントハンドラを使用して.class-oneにクラスを追加する方法を知っているが、同時に私は<body>に追加するoverflow: hiddenが必要です！
私のjQueryのコードは次のとおりです。

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

それはOKですが、どのように私は.class-oneに.activeクラスを切り替えた後<body>にスタイルを追加することができますか？ .class-oneがACTIVEになると、<body>はoverflow:hiddenになるはずです。

ありがとうございました！

出典

2017-10-17 GMedija

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

Uは、このコードを使用できます。

出典

2017-10-17 09:26:16

あなたはこのようにjQueryとCSSを与えることができます：

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

body.overflow{ 
    overflow:hidden; 
}

出典

2017-10-17 09:24:50

使用thisキーワードを。ここでは、クリック時に要素のスタイルを変更する方法を示しました。

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

ではなくクリックし、私はマウスオーバー方法

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

を提案したいと思います。

出典

2017-10-17 09:25:18

トグルは、クラスがある場合、それは追加されたクラスが存在しない場合には、それを削除することを意味しますそれ。 Opは、クラスがアクティブな場合にのみ何かを追加したい。したがって、jQueryでは、hasClassまたは$（ "。active"）を使用する必要があります。または、意図した目的でCSSを使用します。 "this"を使用すると、hasclassでチェックしない限り毎回追加されます – user5014677

このコードを試すと、.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'); 
    } 
});

出典

2017-10-17 09:30:27

フラグを使用できます。最初に.class-oneに.activeが存在しない場合は、そのフラグをfalse（それ以外の場合はtrue）に設定することができます。次に、クリックごとに前後に切り替えます（true/false）。フラグが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"); 
});

出典

2017-10-17 15:42:47 curveball

jQueryはクラスが追加されたらスタイルを追加しますか？

答えて

関連する問題