Javascript向当前代码添加功能

Question

我正在使用 wordpress contact form 7 插件，需要我当前的 javascript 代码将 onclick 和 data-img 属性添加到复选框(请参阅 javascript 底部的注释部分)。 Contact form 7 使用短代码创建复选框(看起来像这样:[checkbox checkbox1 use_label_element "Choice 1"])，除非我更改插件文件，否则不可能添加 id 或 class 以外的属性。我宁愿只修改我必须将这些属性添加到特定复选框的 javascript。

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

谢谢!

edit 如果可以用不同于“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';
      }
    }