Javascript 如果页面上不存在特定类，则添加类

我对JS很陌生，并且已经搜索了一段时间了，。我可能缺乏产生这种具体解决办法所需的术语。我正在尝试创建一系列具有活动状态的四个元素，其中一个元素一次只能处于活动状态，单击时会打开下面的标题。我使用了

.addClass

、

.removeClass

和

.toggleClass

的组合来实现这一点

html很长，但如果需要，我可以在这里发布

我几乎做到了这一点，但一旦标题区打开，我就无法让它再次关闭。标题绝对位于相对父项中，因此不会影响父项本身的高度。我正在使用元素

#landercaptions

中的removeClass

.lcs closed

在元素处于活动状态时打开此空间，但在没有元素处于活动状态时找不到进行此恢复的方法

我的想法如下：“如果没有元素的class

.sh处于活动状态

，请将class

.lcs closed

添加到

#landercaptions

元素中。我尝试了

.hasClass

的各种用法，但在加载页面后没有找到任何有效的方法

这是我的密码：

<script type="text/javascript">
        $('#one').click( function() {
            $("#capone").toggleClass("lc-hidden");  
            $("#captwo, #capthree, #capfour").addClass("lc-hidden");
            $("#two, #three, #four").removeClass('sh-active');
            $("#one").toggleClass('sh-active');
            $("#landercaptions").removeClass("lcs-closed");
        } );
        $('#two').click( function() {
            $("#captwo").toggleClass("lc-hidden");
            $("#capone, #capthree, #capfour").addClass("lc-hidden");
            $("#one, #three, #four").removeClass('sh-active');
            $("#two").toggleClass('sh-active');
            $("#landercaptions").removeClass("lcs-closed");
        } );
        $('#three').click( function() {
            $("#capthree").toggleClass("lc-hidden");
            $("#capone, #captwo, #capfour").addClass("lc-hidden");
            $("#one, #two, #four").removeClass('sh-active');
            $("#three").toggleClass('sh-active');
            $("#landercaptions").removeClass("lcs-closed");
        } );
        $('#four').click( function() {
            $("#capfour").toggleClass("lc-hidden");
            $("#capone, #captwo, #capthree").addClass("lc-hidden");
            $("#one, #two, #three").removeClass('sh-active');
            $("#four").toggleClass('sh-active');
            $("#landercaptions").removeClass("lcs-closed");
        } );
    </script>

$（'#一'）。单击（函数（）{
$（“#capone”）.toggleClass（“lc隐藏”）；
$（“#captwo，#capthree，#capfour”）.addClass（“lc隐藏”）；
$（“二、三、四”）.removeClass（'sh-active'）；
$（“#一”）.toggleClass（'sh-active'）；
$（“#landercaptions”）.removeClass（“lcs关闭”）；
} );
$（'#two'）。单击（函数（）{
$（“#captwo”）.toggleClass（“lc隐藏”）；
$（“#capone，#capthree，#capfour”）.addClass（“lc隐藏”）；
$（“一、三、四”）.removeClass（'sh-active'）；
$（“#两”）.toggleClass（'sh-active'）；
$（“#landercaptions”）.removeClass（“lcs关闭”）；
} );
$（'#三'）。单击（函数（）{
$（“#capthree”）.toggleClass（“lc隐藏”）；
$（“#capone，#captwo，#capfour”）.addClass（“lc隐藏”）；
$（“一、二、四”）.removeClass（'sh-active'）；
$（“#三”）.toggleClass（'sh-active'）；
$（“#landercaptions”）.removeClass（“lcs关闭”）；
} );
$（“#四”）。单击（函数（）{
$（“#capfour”）.toggleClass（“lc隐藏”）；
$（“#capone，#captwo，#capthree”）.addClass（“lc隐藏”）；
$（“一、二、三”）.removeClass（'sh-active'）；
$（“#四”）.toggleClass（'sh-active'）；
$（“#landercaptions”）.removeClass（“lcs关闭”）；
} );

当所有元素都处于非活动状态（标题区关闭）时，如何使此页面恢复到加载状态

我知道这个问题可能与我已经使用的JS有关，如果有必要，我欢迎您提出修改建议

按要求编辑以下是html：

<div class="landercols">    
<div class="lcheader">
    <h1 class="center">GoParenting. For growing families.</h1>
</div>
<div class="onefourth">
    <div class="stepholder" id="one"></div>
    <div class="steptitle">
        <h3 class="center">About</h3>
    </div>
</div>
<div class="onefourth">
    <div class="stepholder" id="two"></div>
    <div class="steptitle">
        <h3 class="center">Asking</h3>
    </div>
</div>
<div class="onefourth">
    <div class="stepholder" id="three"></div>
    <div class="steptitle">
        <h3 class="center">Action</h3>
    </div>
</div>
<div class="onefourth">
    <div class="stepholder" id="four"></div>
    <div class="steptitle">
        <h3 class="center">And then...</h3>
    </div>
</div>
<div id="landercaptions" class="lcs-closed">
    <div class="landercaption lc-hidden" id="capone">
        <h5 class="center narrow">At GoParenting we specialise in working with families with children aged two to eighteen, and have worked with hundreds of parents with an extremely varied range of parenting issues. We share positive parenting strategies with mums and dads to help them manage their children’s behaviour and improve their family relationships.</h5>
        <a href="http://wpf.matmartin.co.uk/about">
            <div class="button" id="midfloat">
                <h6>About GoParenting</h6>
            </div>
        </a>
    </div>
    <div class="landercaption lc-hidden" id="captwo">
        <h5 class="center narrow">Parenting can be tough, but asking for help doesn’t have to be. Bringing up children is one of the hardest jobs we do in our lives but we don’t receive any training for it - we have to learn as we go. When you ask GoParenting for support you are taking a huge step toward becoming a stronger, happier parent.</h5>
        <a href="http://wpf.matmartin.co.uk/contact">
            <div class="button" id="midfloat">
                <h6>Contact us</h6>
            </div>
        </a>
    </div>
    <div class="landercaption lc-hidden" id="capthree">
        <h5 class="center narrow">When you ask GoParenting for help we will discuss how you would like us to support you. We will then create a tailored plan for you to follow, which will include weekly emails and calls. We will also follow up after support ends to see how things are going.</h5>
        <a href="http://wpf.matmartin.co.uk/how-it-works">
            <div class="button" id="midfloat">
                <h6>How it works</h6>
            </div>
        </a>
    </div>
    <div class="landercaption lc-hidden" id="capfour">
        <h5 class="center narrow">The GoParenting strategies we discuss are tailored to your needs. They are confidential and designed to help you with whatever changes you would like to make right now. They will also be invaluable in helping you to support your children long into the future as they grow and develop.</h5>
        <a href="http://wpf.matmartin.co.uk/testimonials">
            <div class="button" id="midfloat">
                <h6>How we've helped other parents</h6>
            </div>
        </a>
    </div>
</div>

为了成长中的家庭。
关于
询问
行动
然后。。。
在GoParking，我们专门与有2至18岁孩子的家庭合作，并与数百名父母合作，解决各种各样的育儿问题。我们与父母分享积极的育儿策略，帮助他们管理孩子的行为，改善家庭关系。
为人父母可能会很艰难，但寻求帮助并不一定如此。抚养孩子是我们一生中最艰难的工作之一，但我们没有接受任何培训——我们必须边做边学。当你向父母寻求支持时，你正在朝着成为一个更坚强、更快乐的父母迈出一大步。
当您向GoParenting寻求帮助时，我们将讨论您希望我们如何支持您。然后，我们将为您制定一个量身定制的计划，包括每周的电子邮件和电话。我们还将在支持结束后跟进，以了解情况。
我们讨论的育儿策略是根据您的需要量身定制的。这些策略是保密的，旨在帮助您实现您现在想要做出的任何改变。它们在帮助您的孩子在未来的成长和发展过程中为他们提供长期支持方面也是非常宝贵的。

---

要查看页面上是否有具有给定类的元素，需要检查返回的jQuery包装中有多少项

if ($(".sh-active").length == 0) { 
  //... 
}

对于@user5014677:

！$（“.sh活动”）

-始终计算为

false

console.log（$（“.existing class”）.length）；
console.log（！$（“.existing class”）；
log（$（“.non-existing class”）.length）；
console.log（！$（“.non-existing class”）；

如果您只执行

$（.sh active”）

它将返回一个元素。因此

如果（！$（.sh active”）{}

基本上是指如果这个类不存在，则执行一些操作。假设您已经在使用jQuery，您可以使用

hasClass（“sh active”）

方法使用类而不是ID:

$（.sh'）。单击（function（）{（.sh”）。removeClass（“sh active“；$（this）.addClass（“sh active”）；}）；

@user5014677谢谢。我以为我已经尝试过了，但没有得到我需要的结果。您将如何实现它？@mtm您需要包含生成的HTML，而不是PHP。如果您将此条件放在每个

的最后一行，这将起作用。单击（）

handler.Thank@igor，但恐怕我不完全理解。我确实尝试过使用此方法-

if（$（“.sh active”）.length==0）

-但没有任何成功。是不是在加载时检查，但之后对html的进一步更改不会产生这些条件响应？@Makaze，这很令人鼓舞-你能帮助一个学习者并告诉我你是怎么做的吗