Question

我在网站上添加了一个div，有时会显示1个子div，有时会显示多个div，如果子div的值为1（如果不给主体另一个类别），我想在Body标签中添加一个类。

我尝试了这段代码，但是没有用：

JavaScript

setInterval(function(){
if(jQuery('div#program-days .row').length > 1)
    jQuery('body').addClass('bodyclass1');
else
    jQuery('body').removeClass('bodyclass2');
}, 1000);

HTML

<div id="program-days">
    <div class="row">program 1</div>
    <div class="row">program 2</div>
    <div class="row">program 3</div>
</div>

Answer 1

您可以尝试此代码，如果孩子不止一个，则单击立即尝试，该类将添加到正文中

<!DOCTYPE html>
<html>

<body>
    <!-- This is a comment node! -->
    <button onclick="myFunction()">Try it</button>
    <div id="program-days">
        <div class="row">program 1</div>
        <div class="row">program 2</div>
        <div class="row">program 3</div>
    </div>
    <script>
        function myFunction() {
            var parent = document.getElementById("program-days");
            if (parent.childNodes.length > 1) {
                document.body.classList.add('myclass');
            }
        }
    </script>
</body>

</html>

Answer 2

添加类时，您不会删除其他类：

以下是使用非jQuery的示例：

Javascript：

setInterval(function(){
  var els = document.querySelectorAll("#program-days .row");
  var body = document.querySelector("body");

  if (els.length > 1) {
    body.classList.add("red-border");
    body.classList.remove("blue-border");
  } else {
    body.classList.add("blue-border");
    body.classList.remove("red-border");
  }
}, 1000);

HTML：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="program-days">
      <div class="row">program 1</div>
      <div class="row">program 2</div>
      <div class="row">program 3</div>
    </div>
  </body>

</html>

CSS：

.red-border {
  border: 1px solid red;
}

.blue-border {
  border: 1px solid blue;
}

工作勤奋的人：http://plnkr.co/edit/ATP63ZWXASTwFaG2jM3y?p=preview

也可以使用您的语法在jQuery中完成

。

Answer 3

您应该像这样删除class和addClass

setInterval(function(){
    if(jQuery('div#program-days .row').length > 1){
        jQuery('body').addClass('bodyclass1');
         jQuery('body').removeClass('bodyclass2');
        }
    else{

        jQuery('body').removeClass('bodyclass1');
        jQuery('body').addClass('bodyclass2');
        }
    }, 1000);

setInterval(function(){
if(jQuery('div#program-days .row').length > 1){
    jQuery('body').addClass('bodyclass1');
     jQuery('body').removeClass('bodyclass2');
    }
else{

    jQuery('body').removeClass('bodyclass1');
    jQuery('body').addClass('bodyclass2');
    }
}, 1000);

.bodyclass1{
background-color:red;
}
.bodyclass2{
background-color:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="program-days">
    <div class="row">program 1</div>
    <div class="row">program 2</div>
    <div class="row">program 3</div>
</div>

如果父div的子div超过1个，则将body添加到class

3 个答案: