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

Question

当select输入的.change()触发时，我试图更改div-元素的背景图像，但我无法让它工作。正如您在我的代码中所看到的，我试图在选择输入中选择父跳水时，动态地更改我的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

我自己找到了解决办法。

我必须宣布我的道路如下：

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

现在起作用了。

Answer 2

问题是$(".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 3

在.menu1中，.menu2类以内联形式提供了display属性。如果该特定元素中没有内容，则宽度和高度属性将为0px。将显示内联改为内联块，这样就可以正常工作了。$(“.”)隐藏了menu1和menu2元素，从而改变了这一点。请参考此链接