压缩javascript代码以显示和隐藏多个div

时间：2018-04-23 17:01:20

标签： javascript html css

我可以改变html。

当鼠标悬停在id为“option1”的div上时，我想显示id为“image1”的div。将鼠标悬停在id为“option2”的div上时，我想显示id为“image2”的div。依此类推，直到我到达终点（div为id“option4”）。我知道可以用css完成，但在某些情况下，div的顺序会导致css无法工作。

以下javascript有效，但我想压缩它，所以每次添加新div时我都不需要硬编码（最终我会有25个以上的div来执行此操作）。

document.getElementById(option1).onmouseover = function() {
document.getElementById(image1).style.display = 'block';}

document.getElementById(option1).onmouseout = function() {
document.getElementById(image1).style.display = 'none';}

我已经尝试过一些javascript，但它似乎只显示我悬停在上面的每个选项的最后一张图片。

var numberOfImages = document.getElementsByClassName("product-image").length;

var i;
for (i = 1; i <= numberOfImages; i++) {
  var optionName = 'option' + i;
  var imageName = 'image' + i;

  document.getElementById(optionName).onmouseover = function() {
    document.getElementById(imageName).style.display = 'block';
  }

  document.getElementById(optionName).onmouseout = function() {
    document.getElementById(imageName).style.display = 'none';
  }
}
.product-option-container {
  width: 66%;
  height: auto;
  float: left;
  margin-bottom: 30px;
}

.product-image-container {
  width: 33%;
  height: auto;
  float: right;
  text-align: center;
  background-color: #E1FDE2;
}

.product-option {
  width: 48%;
  height: auto;
  margin-right: 2%;
  margin-bottom:15px;
  float: left;
  background-color: #FFD1D1;
}

.product-image {
  width: 100%;
  height: auto;
  float: left;
  text-align: center;
  display: none;
}

.product-image img {
  width: auto;
  height: 325px;
}
<div class="product-option-container">
  <div class="product-option"><span id="option1">Option 1</span></div>
  <div class="product-option"><span id="option2">Option 2</span></div><br>
  <div class="product-option"><span id="option3">Option 3</span></div>
  <div class="product-option"><span id="option4">Option 4</span></div>
</div>

<div class="product-image-container">
  <div id="image1" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Elite-Solar-Powered.png"></div>
  <div id="image2" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Echo-Solar-Powered.png"></div>
  <div id="image3" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Equip-Solar-Powered.png"></div>
  <div id="image4" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Ember-Solar-Powered.png"></div>
</div>

5 个答案:

答案 0 :(得分：1)

您的代码缺少关闭。

实际上并不需要：使用CSS选择器选择所有选项

然后使用数据属性或在此处，将id替换为图像id

＆＃13;
＆＃13; 
document.querySelectorAll(".product-option>span").forEach(function(opt) {
  opt.onmouseover = function() {
    document.getElementById("image"+this.id.replace("option","")).style.display = 'block';
  }

  opt.onmouseout = function() {
    document.getElementById("image"+this.id.replace("option","")).style.display = 'none';
  }
});
＆＃13; 
.product-option-container {
  width: 66%;
  height: auto;
  float: left;
  margin-bottom: 30px;
}

.product-image-container {
  width: 33%;
  height: auto;
  float: right;
  text-align: center;
  background-color: #E1FDE2;
}

.product-option {
  width: 48%;
  height: auto;
  margin-right: 2%;
  margin-bottom:15px;
  float: left;
  background-color: #FFD1D1;
}

.product-image {
  width: 100%;
  height: auto;
  float: left;
  text-align: center;
  display: none;
}

.product-image img {
  width: auto;
  height: 325px;
}
＆＃13; 
<div class="product-option-container">
  <div class="product-option"><span id="option1">Option 1</span></div>
  <div class="product-option"><span id="option2">Option 2</span></div><br>
  <div class="product-option"><span id="option3">Option 3</span></div>
  <div class="product-option"><span id="option4">Option 4</span></div>
</div>

<div class="product-image-container">
  <div id="image1" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Elite-Solar-Powered.png"></div>
  <div id="image2" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Echo-Solar-Powered.png"></div>
  <div id="image3" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Equip-Solar-Powered.png"></div>
  <div id="image4" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Ember-Solar-Powered.png"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您编写的代码问题是，在循环的最后一次迭代之后，optionName和imageName是最后一次迭代的值，所以当您执行

时 
document.getElementById(imageName)
例如，

，imageName是最后一次迭代的值。如果将该部分包装在闭包中：

var optionName = 'option' + i;
var imageName = 'image' + i;
(function (imageName, optionName) {
   //your code
})(imageName, optionName);

然后值不会在闭包内部发生变化，因此它将按预期工作：

var numberOfImages = document.getElementsByClassName("product-image").length;

var i;
for (i = 1; i <= numberOfImages; i++) {
  var optionName = 'option' + i;
  var imageName = 'image' + i;
  (function(optionName, imageName) {
    document.getElementById(optionName).onmouseover = function() {
      document.getElementById(imageName).style.display = 'block';
    }

    document.getElementById(optionName).onmouseout = function() {
      document.getElementById(imageName).style.display = 'none';
    }
  })(optionName, imageName);
}
.product-option-container {
  width: 66%;
  height: auto;
  float: left;
  margin-bottom: 30px;
}

.product-image-container {
  width: 33%;
  height: auto;
  float: right;
  text-align: center;
  background-color: #E1FDE2;
}

.product-option {
  width: 48%;
  height: auto;
  margin-right: 2%;
  margin-bottom:15px;
  float: left;
  background-color: #FFD1D1;
}

.product-image {
  width: 100%;
  height: auto;
  float: left;
  text-align: center;
  display: none;
}

.product-image img {
  width: auto;
  height: 325px;
}
<div class="product-option-container">
  <div class="product-option"><span id="option1">Option 1</span></div>
  <div class="product-option"><span id="option2">Option 2</span></div><br>
  <div class="product-option"><span id="option3">Option 3</span></div>
  <div class="product-option"><span id="option4">Option 4</span></div>
</div>

<div class="product-image-container">
  <div id="image1" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Elite-Solar-Powered.png"></div>
  <div id="image2" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Echo-Solar-Powered.png"></div>
  <div id="image3" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Equip-Solar-Powered.png"></div>
  <div id="image4" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Ember-Solar-Powered.png"></div>
</div>

答案 2 :(得分：0)

＆＃13;
＆＃13; 
document.querySelectorAll(".product-option span").forEach(function(v, i) {
    v.onmouseover = function() {
        document.getElementById("image" + (i + 1)).style.display = 'block';
    }
    v.onmouseout = function() {
        document.getElementById("image" + (i + 1)).style.display = 'none';
    }
});
＆＃13; 
.product-option-container {
  width: 66%;
  height: auto;
  float: left;
  margin-bottom: 30px;
}

.product-image-container {
  width: 33%;
  height: auto;
  float: right;
  text-align: center;
  background-color: #E1FDE2;
}

.product-option {
  width: 48%;
  height: auto;
  margin-right: 2%;
  margin-bottom:15px;
  float: left;
  background-color: #FFD1D1;
}

.product-image {
  width: 100%;
  height: auto;
  float: left;
  text-align: center;
  display: none;
}

.product-image img {
  width: auto;
  height: 325px;
}
＆＃13; 
<div class="product-option-container">
  <div class="product-option"><span id="option1">Option 1</span></div>
  <div class="product-option"><span id="option2">Option 2</span></div><br>
  <div class="product-option"><span id="option3">Option 3</span></div>
  <div class="product-option"><span id="option4">Option 4</span></div>
</div>

<div class="product-image-container">
  <div id="image1" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Elite-Solar-Powered.png"></div>
  <div id="image2" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Echo-Solar-Powered.png"></div>
  <div id="image3" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Equip-Solar-Powered.png"></div>
  <div id="image4" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Ember-Solar-Powered.png"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我喜欢@ mplungjan的答案，但你是对的，代码背后的逻辑是有道理的。问题在于JS如何处理var声明。简而言之，在循环中声明var可能导致非直观的结果，如果您有选择，则应使用let代替。我已在您的代码中将var替换为let，但它似乎有效。

＆＃13;
＆＃13; 
var numberOfImages = document.getElementsByClassName("product-image").length;

var i;
for (i = 1; i <= numberOfImages; i++) {
  let optionName = 'option' + i;
  let imageName = 'image' + i;

  document.getElementById(optionName).onmouseover = function() {
    document.getElementById(imageName).style.display = 'block';
  }

  document.getElementById(optionName).onmouseout = function() {
    document.getElementById(imageName).style.display = 'none';
  }
}
＆＃13; 
.product-option-container {
  width: 66%;
  height: auto;
  float: left;
  margin-bottom: 30px;
}

.product-image-container {
  width: 33%;
  height: auto;
  float: right;
  text-align: center;
  background-color: #E1FDE2;
}

.product-option {
  width: 48%;
  height: auto;
  margin-right: 2%;
  margin-bottom:15px;
  float: left;
  background-color: #FFD1D1;
}

.product-image {
  width: 100%;
  height: auto;
  float: left;
  text-align: center;
  display: none;
}

.product-image img {
  width: auto;
  height: 325px;
}
＆＃13; 
<div class="product-option-container">
  <div class="product-option"><span id="option1">Option 1</span></div>
  <div class="product-option"><span id="option2">Option 2</span></div><br>
  <div class="product-option"><span id="option3">Option 3</span></div>
  <div class="product-option"><span id="option4">Option 4</span></div>
</div>

<div class="product-image-container">
  <div id="image1" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Elite-Solar-Powered.png"></div>
  <div id="image2" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Echo-Solar-Powered.png"></div>
  <div id="image3" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Equip-Solar-Powered.png"></div>
  <div id="image4" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Ember-Solar-Powered.png"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

如果您不使用ES6且无法使用let声明变量，那么您需要立即调用一个函数（通过闭包）来返回一个函数。从IIFE返回的功能将是您指定为onmouseover和onmouseout事件处理程序的功能。

这个问题对于新的JavaScript开发人员来说仍然是一个常见的陷阱，他们仍然在学习如何在JavaScript中使用作用域。

以下是一个例子：

＆＃13;
＆＃13; 
var numberOfImages = document.getElementsByClassName("product-image").length;

for (i = 1; i <= numberOfImages; i++) {
  var optionName = 'option' + i;

  document.getElementById(optionName).onmouseover = (function() {
    var imageName = 'image' + i;
    return function() {
      document.getElementById(imageName).style.display = 'block';
    }
  })();

  document.getElementById(optionName).onmouseout = (function() {
    var imageName = 'image' + i;
    return function() {
      document.getElementById(imageName).style.display = 'none';
    }
  })();
}
＆＃13; 
.product-option-container {
  width: 66%;
  height: auto;
  float: left;
  margin-bottom: 30px;
}

.product-image-container {
  width: 33%;
  height: auto;
  float: right;
  text-align: center;
  background-color: #E1FDE2;
}

.product-option {
  width: 48%;
  height: auto;
  margin-right: 2%;
  margin-bottom: 15px;
  float: left;
  background-color: #FFD1D1;
}

.product-image {
  width: 100%;
  height: auto;
  float: left;
  text-align: center;
  display: none;
}

.product-image img {
  width: auto;
  height: 325px;
}
＆＃13; 
<div class="product-option-container">
  <div class="product-option"><span id="option1">Option 1</span></div>
  <div class="product-option"><span id="option2">Option 2</span></div><br>
  <div class="product-option"><span id="option3">Option 3</span></div>
  <div class="product-option"><span id="option4">Option 4</span></div>
</div>

<div class="product-image-container">
  <div id="image1" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Elite-Solar-Powered.png"></div>
  <div id="image2" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Echo-Solar-Powered.png"></div>
  <div id="image3" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Equip-Solar-Powered.png"></div>
  <div id="image4" class="product-image"><img src="https://megavoice.com/uploads/MegaVoice-Audio-Bible-Envoy-Ember-Solar-Powered.png"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

这是一个解释JavaScript中的闭包的页面：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

相关问题
最新问题