Question

需要知道要添加哪些代码才能使div成为id＆＃34; image1＆＃34;当id为＃34; chk1＆＃34;的复选框时仍然可见在未选中时检查然后隐藏。复选框代码应覆盖悬停显示/隐藏代码。其余复选框也一样（带有image2的chk2等）。最终，我将有25个以上的复选框......

＆＃13;

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);
}

＆＃13;

.product-option-container {
  width: 66%;
  height: auto;
  float: left;
  margin-bottom: 30px;
}

.product-option {
  width: 48%;
  height: auto;
  margin-right: 2%;
  float: left;
}

.product-image-container {
  width: 33%;
  height: auto;
  float: right;
  text-align: center;
}

.product-image {
  width: 100%;
  height: auto;
  float: left;
  text-align: center;
  display: none;
}

.product-image img {
  width: 100%;
  height: auto;
}

＆＃13;

<div class="product-option-container">
<div class="product-option"><span id="option1">[checkbox checkbox-600 use_label_element "Envoy Elite" id="chk1"]</span></div>
<div class="product-option"><span id="option2">[checkbox checkbox-601 use_label_element "Envoy Echo" id="chk2"]</span></div><br>
<div class="product-option"><span id="option3">[checkbox checkbox-602 use_label_element "Envoy Equip" id="chk3"]</span></div>
<div class="product-option"><span id="option4">[checkbox checkbox-603 use_label_element "Envoy Ember" id="chk4"]</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;

Answer 1

您可以尝试下面的内容，

我已为您的图片代码添加了新属性，并在点击复选功能上调用了该功能

临时我刚刚将图像宽度更改为10％，以便您可以看到效果。

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() {
	  if(!document.getElementById(optionName).children[0].checked){
		document.getElementById(imageName).style.display = 'block';
	  }
    }

    document.getElementById(optionName).onmouseout = function() {
	  if(!document.getElementById(optionName).children[0].checked){
		document.getElementById(imageName).style.display = 'none';
	  }
    }
  })(optionName, imageName);
  
}

function showImage(){
	var ele = document.getElementById(event.target.getAttribute("data-img"));
	if(event.target.checked){
		ele.style.display='block';
	}else{
		ele.style.display='none';
	}
	
}

.product-option-container {
  width: 66%;
  height: auto;
  float: left;
  margin-bottom: 30px;
}

.product-option {
  width: 48%;
  height: auto;
  margin-right: 2%;
  float: left;
}

.product-image-container {
  width: 33%;
  height: auto;
  float: right;
  text-align: center;
}

.product-image {
  width: 10%;
  height: auto;
  float: left;
  text-align: center;
  display: none;
}

.product-image img {
  width: 100%;
  height: auto;
}

<div class="product-option-container">
<div class="product-option"><span id="option1"><input type="checkbox" class="imageChk"  onclick="showImage();" id="chk1" data-img="image1"/>Image1</span></div>
<div class="product-option"><span id="option2"><input type="checkbox" class="imageChk"  onclick="showImage();" id="chk2" data-img="image2"/>Image2</span></div><br>
<div class="product-option"><span id="option3"><input type="checkbox" class="imageChk"  onclick="showImage();" id="chk3" data-img="image3"/>Image3</span></div>
<div class="product-option"><span id="option4"><input type="checkbox" class="imageChk"  onclick="showImage();" id="chk4" data-img="image4"/>Image4</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>

选中复选框时，可以使div显示的其他Javascript代码

1 个答案: