Question

我试图在选择输入的.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

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

＆＃13;

$(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 + ')');
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

在.menu1，.menu2类中，您将显示属性设置为内联。如果该特定元素中没有内容，则width和height属性将为0px。将显示内联更改为内联块，它将正常工作。 $（＆＃34; .abo-forms div＆＃34;）隐藏了menu1，menu2元素改变了这一点。 Please refer this link

Answer 3

我自己找到了解决方案。

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

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

现在可行。

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

3 个答案: