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').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 + "' />") } });。因为有两个，所以您的代码根本行不通。

（{https://codepen.io/anon/pen/vbdMQg是您要找的东西吗？）

以下是循环的摘要：

{{1}}

如何更改背景图片？

1 个答案: