jQuery：在选择输入的 .change() 上更改 <div> 背景

Question

我正在尝试改变div-compent的后台图像。选择输入火灾时，但我没有它可以工作。正如您在我的代码中看到的那样，我尝试在我的选择输入中选择父潜水后立即动态更改我的 2 个 div 元素的背景图像。

这是我的代码：

$(window).bind('setup', function() {
  $(".abo-forms div").hide();
  $(".active-form").show();
});


$(document).ready(function() {
  $(window).trigger('setup');
  $("#abo-weekday").change(function() {
    var val = $(this).val();
    $(".abo-forms div").hide();
    $(".abo-forms div").removeClass("active-form");
    $("#" + val + "Form").addClass("active-form");
    $(".active-form").show();
    var menu1 = "../img/" + val + "menu1.jpg";
    var menu2 = "../img/" + val + "menu2.jpg";
    $('.menu1').css('background-image', 'url(' + menu1 + ')');
    $('.menu2').css('background-image', 'url(' + menu2 + ')');
  });
});

.menu1,
.menu2 {
  background-size: contain;
  display: inline;
  height: 200px;
  width: 200px;
}

<div id="abo-menu">
  <div class="small-12 columns">
    <select id="abo-weekday">
      <option value="monday">Monday</option>
      <option value="tuesday">Tuesday</option>
      <option value="wednesday">Wednesday</option>
      <option value="thursday">Thursday</option>
      <option value="friday">Friday</option>
    </select>
  </div>
</div>
<div class="abo-forms">
  <div id="mondayForm" class="active-form small-12 columns">
    <div class="menu1"></div>
    <div class="menu2"></div>
    Monday menu
  </div>
  <div id="tuesdayForm" class="small-12 columns">
    <div class="menu1"></div>
    <div class="menu2"></div>
    Tuesday menu
  </div>
  <div id="wednesdayForm" class="small-12 columns">
    <div class="menu1"></div>
    <div class="menu2"></div>
    Wednesday menu
  </div>
  <div id="thursdayForm" class="small-12 columns">
    <div class="menu1"></div>
    <div class="menu2"></div>
    Thursday menu
  </div>
  <div id="fridayForm" class="small-12 columns">
    <div class="menu1"></div>
    <div class="menu2"></div>
    Firday menu
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Answer 1

问题是$(".abo-forms div") 也隐藏了menu1 和menu2 元素。您可以调整选择器以仅隐藏 abo-forms 的直接子代。

$(window).bind('setup', function() {
  $(".abo-forms > div").hide();
  $(".active-form").show();
});


$(document).ready(function() {
  $(window).trigger('setup');
  $("#abo-weekday").change(function() {
    var val = $(this).val();
    var a = $(".abo-forms > div").hide();
    $(".abo-forms > div.active-form").removeClass("active-form");
    $("#" + val + "Form").addClass("active-form").show();
    //changed for demo
    var menu1 = "//placehold.it/200/fff000?text=" + val + '-m1';
    var menu2 = "//placehold.it/200/fff000?text=" + val + '-m2';
    $('.menu1').css('background-image', 'url(' + menu1 + ')');
    $('.menu2').css('background-image', 'url(' + menu2 + ')');
  });
});

.menu1,
.menu2 {
  background-size: contain;
  display: inline-block;
  height: 200px;
  width: 200px;
}

<div id="abo-menu">
  <div class="small-12 columns">
    <select id="abo-weekday">
      <option value="monday">Monday</option>
      <option value="tuesday">Tuesday</option>
      <option value="wednesday">Wednesday</option>
      <option value="thursday">Thursday</option>
      <option value="friday">Friday</option>
    </select>
  </div>
</div>
<div class="abo-forms">
  <div id="mondayForm" class="active-form small-12 columns">
    <div class="menu1"></div>
    <div class="menu2"></div>
    Monday menu
  </div>
  <div id="tuesdayForm" class="small-12 columns">
    <div class="menu1"></div>
    <div class="menu2"></div>
    Tuesday menu
  </div>
  <div id="wednesdayForm" class="small-12 columns">
    <div class="menu1"></div>
    <div class="menu2"></div>
    Wednesday menu
  </div>
  <div id="thursdayForm" class="small-12 columns">
    <div class="menu1"></div>
    <div class="menu2"></div>
    Thursday menu
  </div>
  <div id="fridayForm" class="small-12 columns">
    <div class="menu1"></div>
    <div class="menu2"></div>
    Firday menu
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Answer 2

在 .menu1、.menu2 类中，您将显示属性指定为内联。如果该特定元素中没有内容，则 width 和 height 属性将为 0px。 将显示内联更改为 inline-block 它将正常工作。 $(".abo-forms div") 隐藏 menu1 和 menu2 元素改变了这一点。 Please refer this link

Answer 3

自己找到了解决方案。

我必须将我的路径声明如下：

var menu1 = "./img/" + val + 'menu1.jpg';

现在可以了。