如何更改背景图片？

Question

我开始学习最近编码，并下载一个模板进行这项工作。我想新的章节从不同的页面添加到页面。这部分是关于我们页，包含图像和背景下，我想将它添加到目的地节。我成功添加一个部分，但是当我试图到多个章节我碰到一个问题就来了。因此，图像不改变只停留我在首节审阅。下面我将添加网页和代码的截图。

/* - About Section */
function about_img() {
  var width = $(window).width();
  var about_content_height = $(".about-section").height();
  if (width >= 992) {
    $(".about-section .about-img img").remove();
    var about_image = $(".about-section .about-img").attr("data-image");
    $(".about-section .about-img").css({
      "background-image": "url('" + about_image + "')",
      "height": about_content_height
    });
  } else {
    $(".about-section .about-img").removeAttr("style");
    $(".about-section .about-img img").remove();
    var about_image = $(".about-section .about-img").attr("data-image");
    $(".about-section .about-img").append("<img src='" + about_image + "' />")
  }
}

.about-img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- About Section -->
<div id="about-section" class="container-fluid no-left-padding no-right-padding about-section">
  <!-- About Image -->
  <div class="col-md-6 col-am-12 no-padding about-img" data-image="images/destination-1.jpg">
    <img src="images/destination-1.jpg" />
  </div>
  <!-- About Image /- -->
  <!-- About Content -->
  <div class="col-md-6 col-sm-12 about-content">
    <!-- Section Header -->
    <div class="section-header">
      <h3>We Share Something</h3>
      <h6>With me</h6>
    </div>
    <!-- Section Header /- -->
    <div class="about-content-box">
      <h4>The mate was a mighty sailin man the Skipper brave and sure. Five passegers set sail.</h4>
      <p>The Love Boat soon will be making another run. The Love Boat promises something for everyone. who wabusy with three boys of his own. Sunny Days sweepin' the clouds away. On my way to where the air is sweet. Can you tell me how to get how to get
        to Sesame Street The mate a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour. Till the one day when the lady met this fellow more than a hunch.</p>
    </div>
  </div>
  <!-- About Content /- -->
</div>
<!-- About Section /- -->
<!-- About Section -->
<div id="about-section" class="container-fluid no-left-padding no-right-padding about-section">
  <!-- About Content -->
  <div class="col-md-6 col-sm-12 about-content">
    <!-- Section Header -->
    <div class="section-header">
      <h3>We Share Something</h3>
      <h6>About us</h6>
    </div>
    <!-- Section Header /- -->
    <div class="about-content-box">
      <h4>The mate was a mighty sailin man the Skipper brave and sure. Five passegers set sail.</h4>
      <p>The Love Boat soon will be making another run. The Love Boat promises something for everyone. who wabusy with three boys of his own. Sunny Days sweepin' the clouds away. On my way to where the air is sweet. Can you tell me how to get how to get
        to Sesame Street The mate a mighty sailin' man the Skipper brave and sure. F
ive passengers set sail that day for a three hour tour a three hour tour. Till the one day when the lady met this fellow more than a hunch.</p>
    </div>
  </div>
  <!-- About Content /- -->
  <!-- About Image -->
  <div class="col-md-6 col-am-12 no-padding about-img" data-image="images/destination-2.jpg">
    <img src="images/destination-2.jpg" />
  </div>
  <!-- About Image /- -->
</div>
<!-- About Section /- -->

Answer 1

首先，你必须在你的HTML复制ID和这是一个很大的不，不。所以，你要改变这种状况。但是，这不是问题！

其次，你通过.about-section需要循环。因为你有两个人，你的代码根本不起作用。

（https://codepen.io/anon/pen/vbdMQg就是你要找的东西？）

这是什么样的循环看起来像一个片段：

$('.about-section').each(function(){
    var about_content_height = $(this).height();
    if (width >= 992) {
        $(this).find(".about-img img").remove();
        var about_image = $(this).find(".about-img").attr("data-image");
        $(this).find(".about-img").css({
            "background-image": "url('" + about_image + "')",
            "height": about_content_height
        });
    } else {
        $(this).find(".about-img").removeAttr("style");
        $(this).find(".about-img img").remove();
        var about_image = $(this).find(".about-img").attr("data-image");
        $(this).find(".about-img").append("<img src='" + about_image + "' />")
    }
});