Question

我是jquery的新手，尝试使用jquery来添加css类来设置html样式，但这里内部的孩子并没有切换...... here is my fiddle

＆＃13;

$(document).ready(function() {
  $("#styling").click(function() {
    //header
    $("header").find("h2").toggleClass("heading");
    //navigation
    $(".list-items").find("li").toggleClass("list");
    //content styles
    $(".content > div:nth-child(1)").toggleClass("lft-cnt");
    $(".content > div:nth-child(2)").toggleClass("rgt-cnt");
    $(".rgt-cnt").find(">, div").toggleClass("image");
    $(".testimonials").children().toggleClass("slide");
    $(".slide:nth-child(2n + 1)").css("background-color", "#bbf");
  });
});

＆＃13;

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      margin: 0;
    }
    .container {
      width: 630px;
      height: 100%;
      margin: 0 auto;
    }
    header {
      width: 100%;
      height: 100px;
      background: skyblue;
      text-align: center;
    }
    .heading {
      line-height: 100px;
      text-transform: Capitalize;
      font-family: tahoma;
    }
    ul {
      width: 100%;
    }
    .list {
      display: inline-block;
      padding: 10px 43px;
      background: white;
    }
    .content {
      width: 100%;
      height: auto;
      margin-top: 20px;
      display: inline-block;
    }
    .lft-cnt {
      width: 50%;
      float: left;
      height: auto;
      padding: 0 10px 10px 10px;
    }
    .rgt-cnt {
      width: 49%;
      float: left;
      height: auto;
      padding: 0 10px 10px 10px;
      text-align: center;
      position: relative;
    }
    .testimonials {
      width: 100%;
      height: auto;
      text-align: center;
    }
    .slide {
      width: 130px;
      height: 100px;
      font-family: tahoma;
      text-align: center;
      display: inline-block;
      background-color: #FAD3D3;
    }
    footer {
      width: 100%;
      height: 40px;
      background: black;
      margin: 15px;
      text-align: center;
    }
    .copyright {
      color: grey;
      line-height: 40px;
      font-family: tahoma;
      font-size: 14px;
    }
    .styles {
      width: 100%;
      height: 70px;
      text-align: center;
      position: relative;
    }
    .btn-wrapper {
      width: 100%;
      right: 50%;
      position: absolute;
      bottom: 50%;
      transform: translate(50%, 50%);
    }
    button {
      background: #fff;
      border: 2px solid #000;
      padding: 10px 8px;
      cursor: pointer;
    }
    .image {
      width: 150px;
      height: 150px;
      background: orange;
      position: absloute;
      right: 50%: bottom: 50%;
      transform: translate(50%, 50%);
    }

＆＃13;

<div class="container">
  <header>
    <h2>heading</h2>
  </header>
  <div class="list-items">
    <ul>
      <li>home</li>
      <li>home</li>
      <li>home</li>
      <li>home</li>
      <li>home</li>
    </ul>
  </div>
  <div class="content">
    <div>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution.</p>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution.</p>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution.</p>
    </div>
    <div>
      <div>
        image
      </div>
    </div>
  </div>
  <div class="testimonials">
    <div>slide-one</div>
    <div>slide-two</div>
    <div>slide-three</div>
    <div>slide-four</div>
  </div>
  <footer>
    <div class="copyright">copyright@2016</div>
  </footer>
  <div class="styles">
    <div class="btn-wrapper">
      <button id="styling">style</button>
      <!-- <button id="nav">Navigation-styles</button>
            <button id="cnt">content-styles</button>
            <button id="ftr">footer-styles</button> -->
    </div>
  </div>
</div>

＆＃13;

我是jquery的新手，尝试使用jquery来添加css类来设置html样式，但这里内部的孩子并没有切换...... here is my fiddle

Answer 1

问题在于，虽然您正在切换slide类，但如果执行.css()，则使用伪元素添加的样式将不会切换。 .css()修改了元素style属性（请参阅api参考：http://api.jquery.com/css/），因此无法切换。

作为解决方案，您可以在css文件中包含以下条目 -

.slide:nth-child(2n + 1) { background-color: #bbf; }

并从js中删除行$(".slide:nth-child(2n + 1)").css("background-color", "#bbf");。这样就可以了解

没有在jquery中切换的子类

1 个答案: