Question

我正在使用wordpress联系表单7插件，需要我当前的javascript代码向复选框添加onclick和data-img属性（请参阅javascript底部的注释掉部分）。联系表单7使用短代码创建复选框（如下所示：[checkbox checkbox1 use_label_element“Choice 1”]），除非我更改插件文件，否则无法添加id或class以外的属性。我宁愿只修改我必须将这些属性添加到特定复选框的javascript。

这里的最终目标是，当您将鼠标悬停在选项上时，相应的图像将会出现，然后在您停止悬停时消失。选中此复选框后，图像将可见并保持可见，直到取消选中该复选框。我相信javascript已经在做这个了，但它要求复选框有onclick =“showImage（）;”和data-img =“image（i）”，由于联系表单7短代码，我不能在没有javascript的情况下添加它们。

谢谢！

编辑如果可以使用与“onmouseover”不同的方式添加属性 - 例如在页面加载 - 那么它也可以。 onmouseover首先想到了。

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';
  }

}

/*

var chkBoxName = 'checkbox' + i;
  
function addOnClick() {
    document.getElementsByName("chkBoxName")[0].setAttribute("onclick", "showImage();");
    document.getElementsByName("chkBoxName")[0].setAttribute("data-img", imageName);
}
*/

.product-option-container {
  width: 66%;
  height: auto;
  float: left;
  margin-bottom: 30px;
}

.product-option {
  width: 48%;
  height: auto;
  margin-right: 2%;
  float: left;
  margin-bottom:15px;
}

.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;
}

<div class="product-option-container">
  <div class="product-option"><span id="option1" onmouseover="addOnClick()"><label><input type="checkbox" name="checkbox1">Choice 1</label></span></div>
  
  <div class="product-option"><span id="option2" onmouseover="addOnClick()"><label><input type="checkbox" name="checkbox2" data-img="image2">Choice 2</label></span></div>
  
  <div class="product-option"><span id="option3" onmouseover="addOnClick()"><label><input type="checkbox" name="checkbox3" data-img="image3">Choice 3</label></span></div>
  
  <div class="product-option"><span id="option4" onmouseover="addOnClick()"><label><input type="checkbox" name="checkbox4" data-img="image4">Choice 4</label></span></div>
  
  <div class="product-option"><span id="option5" onmouseover="addOnClick()"><label><input type="checkbox" name="checkbox5" data-img="image5">Choice 5</label></span></div>
  
  <div class="product-option"><span id="option6" onmouseover="addOnClick()"><label><input type="checkbox" name="checkbox6" data-img="image6">Choice 6</label></span></div>
  
  <div class="product-option"><span id="option7" onmouseover="addOnClick()"><label><input type="checkbox" name="checkbox7" data-img="image7">Choice 7</label></span></div>
  
  <div class="product-option"><span id="option8" onmouseover="addOnClick()"><label><input type="checkbox" name="checkbox8" data-img="image8">Choice 8</label></span></div>
</div>

<div class="product-image-container">
  <div id="image1" class="product-image"><img src="#" alt="image 1"></div>
  <div id="image2" class="product-image"><img src="#" alt="image 2"></div>
  <div id="image3" class="product-image"><img src="#" alt="image 3"></div>
  <div id="image4" class="product-image"><img src="#" alt="image 4"></div>
  <div id="image5" class="product-image"><img src="#" alt="image 5"></div>
  <div id="image6" class="product-image"><img src="#" alt="image 6"></div>
  <div id="image7" class="product-image"><img src="#" alt="image 7"></div>
  <div id="image8" class="product-image"><img src="#" alt="image 8"></div>
</div>

编辑：更新了我目前正在使用的代码。当跨度悬停时，图像不会出现。

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

var checkboxes = document.querySelectorAll('input[type=checkbox]');

for (var i = 0; i < checkboxes.length; i++) {

    checkboxes[i].setAttribute("onclick", "showImage();");
    checkboxes[i].setAttribute("data-img", numberOfImages[i].id);
}

function showImage() {
  var ele = document.getElementById(event.target.getAttribute("data-img"));
  if (event.target.checked) {
    ele.style.display = 'block';
  } else {
    ele.style.display = 'none';
  }

}

var j;
for (j = 1; j <= numberOfImages; j++) {
var optionName = 'option' + j;
var imageName = 'image' + j;
(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';
}

}

Answer 1

你注释掉的代码有一个缺陷，你正在宣布一个功能，但它永远不会被用来做这项工作，而这正是你在这里寻找的，你不能在("chkBoxName")添加引号，因为它是变量，所以你就像这样取消函数定义

/*function addOnClick() {*/
      document.getElementsByName(chkBoxName)[0].setAttribute("onclick", "showImage();");
      document.getElementsByName(chkBoxName)[0].setAttribute("data-img", imageName);
  /*}*/

第二个问题出在这一行var chkBoxName = 'checkbox' + i;

您之前使用的变量i已被for循环使用，因此它的值变为9因此chkBoxName = 'checkbox9'

你需要声明另一个变量为1的变量，并像这样使用它：

var checkBoxIndex = 1
var chkBoxName = 'checkbox' + checkBoxIndex ;

最后代码将是这样的：

var checkBoxIndex = 1
var chkBoxName = 'checkbox' + checkBoxIndex ;
document.getElementsByName(chkBoxName)[0].setAttribute("onclick", "showImage();");
document.getElementsByName(chkBoxName)[0].setAttribute("data-img", imageName);

应添加属性。

编辑：这是你的新JS代码试试吧。哦，从你的跨度中删除那些onmouseover

    var numberOfImages = document.getElementsByClassName("product-image");
    var checkboxes = document.querySelectorAll('input[type=checkbox]');

    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].setAttribute("data-img", numberOfImages[i].id);
      checkboxes[i].parentElement.setAttribute("onmouseover", "mouseover(event);");
      checkboxes[i].parentElement.setAttribute("onmouseout", "mouseout(event);"); 
    }

    function mouseover(e)
    {
      console.log(e.target.children[0])
      var ele = document.getElementById(e.target.children[0].getAttribute("data-img"));
        ele.style.display = 'block';
    }

    function mouseout(e)
    {

      if (!e.target.children[0].checked)
      {
        var ele = document.getElementById(e.target.children[0].getAttribute("data-img"));
        ele.style.display = 'none';
      }
    }

Javascript将函数添加到当前代码

1 个答案: