Как я могу изменить фоновое изображение?

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, и это большая нет, нет.Итак, вы захотите изменить это.Но это не проблема!

Во-вторых, вам нужно перебрать .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 + "' />")
    }
});