Question

我有1个div（“.grid_home”），里面有div（“.grid_home_inside”），每个包含一个背景图片。

当mouseenter“.grid_home”div时，我希望背景在div“.grid_home_inside”之间切换，并在到达最后一个时返回第一个“.grid_home_inside”。

这是我到目前为止所尝试的内容，但我无法循环并返回第一个元素。

$(".grid_home").mouseenter(function() {
  $(".displayed").next(".grid_home_inside").addClass("displayed").prev(".grid_home_inside").removeClass("displayed");
})

section .grid_home {
  width: 50vw;
  height: 50vh;
  position: relative;
}

.grid_home_inside {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
}

.grid_home_inside.displayed {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="grid_home">
    <div class="grid_home_inside displayed" style="background: url(https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG) no-repeat center center;background-size:cover;"></div>
    <div class="grid_home_inside" style="background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0A3u74LuIJ6OgDXWY4yWW_4F9bXs_VHTKfxdn-vhjWTlBnz-a) no-repeat center center;background-size:cover;"></div>
    <div class="grid_home_inside" style="background: url(http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2015/10/151027_BA_blue-sky.jpg.CROP.promo-xlarge2.jpg) no-repeat center center;background-size:cover;"></div>
  </div>
</section>

这是一个jsFiddle https://jsfiddle.net/kz08vvt0/

非常感谢任何帮助。

Answer 1

$(".grid_home").mouseenter(function(){
  const grid_home_inside =Array.from($(".grid_home_inside"));
  const div_count=grid_home_inside.length;
  let image_changed_flag=false;
  grid_home_inside.forEach((el,i)=>{
    if(el.classList.contains('displayed')&&!image_changed_flag) {
        image_changed_flag=true;
        el.classList.remove('displayed');
        grid_home_inside[(i===(div_count-1))?0:i+1].classList.add('displayed');
    }
  });
})

section .grid_home {
    width: 50vw  ;
    height: 50vh;
    position:relative;
}

.grid_home_inside {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
}

.grid_home_inside.displayed {

    opacity: 1;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>

  <div class="grid_home">

      <div class="grid_home_inside displayed" style="background: url(https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG) no-repeat center center;background-size:cover;"></div>

      <div class="grid_home_inside" style="background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0A3u74LuIJ6OgDXWY4yWW_4F9bXs_VHTKfxdn-vhjWTlBnz-a) no-repeat center center;background-size:cover;"></div>

      <div class="grid_home_inside" style="background: url(http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2015/10/151027_BA_blue-sky.jpg.CROP.promo-xlarge2.jpg) no-repeat center center;background-size:cover;"></div>

  </div>

</section>

Answer 2

只需使用以下修改后的jquery代码（ 此解决方案适用于任何图片 ） -

"browserify-hmr": "^0.3.5",
"express": "~4.14.0",
"vue": "^2.5.0",
"vueify": "^9.4.1",
"watchify": "^3.9.0"

$(".grid_home").mouseenter(function() {
  if ($(".displayed").next(".grid_home_inside").attr('class') != null) {
    $(".displayed").next(".grid_home_inside").addClass("displayed").prev(".grid_home_inside").removeClass("displayed");
  } else {
    $(".grid_home_inside").last().removeClass("displayed");
    $(".grid_home_inside").first().addClass("displayed");
  }
})

section .grid_home {
  width: 50vw;
  height: 50vh;
  position: relative;
}

.grid_home_inside {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
}

.grid_home_inside.displayed {
  opacity: 1;
}

Answer 3

感谢@Akhil Karthikeyan＆amp; @Smaranjit Maiti

我最终得到了这个代码，就像一个魅力：

<script type="text/javascript">
    document.querySelector("button").addEventListener("click", function(event) {
        calcbmi();
        event.preventDefault();
    }, false);

    function calcbmi() {
        var w = parseInt(document.getElementById('wtxt').value);
        var h = parseInt(document.getElementById('htxt').value);

        var z = w / (h * h);

        document.getElementById('bmitxt').value = z;
    }
</script>

在mouseenter上更改背景图像，然后返回第一个图像

3 个答案: