javascript - 如何更改背景图片？

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 + "' />")
    }
});