Javascript向当前代码中添加函数

我正在使用wordpress contact form 7插件，需要我当前的javascript代码向复选框添加onclick和data img属性（请参阅javascript底部的注释部分）。Contact form 7使用快捷码创建复选框（如下所示：[复选框1使用\u label\u element“Choice 1”]），除非修改插件文件，否则无法添加id或class以外的属性。我宁愿修改javascript，我必须将这些属性添加到特定的复选框中

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

谢谢

编辑如果属性可以以不同于“onmouseover”的方式添加（如页面加载），那么也可以。我首先想到的是一只老鼠

var numberOfImages=document.getElementsByClassName（“产品图像”）.length；
var i；
因为（i=1；i您注释掉的代码中有一个缺陷，您正在声明一个函数，但它从来没有被用来做您在这里寻找的工作，并且您不能在这里添加引号
（“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';
      }
    }

var numberOfImages=document.getElementsByClassName（“产品图像”）；
var checkbox=document.querySelectorAll（'input[type=checkbox]）；
对于（变量i=0；i
当循环结束时，
var i
将等于9，因为只有8个复选框，
chkBoxName
将等于复选框9，然后
document.getElementsByName（“chkBoxName”）[0]
将是未定义的。我尝试将
chkBoxName
设置为
checkbox1
，并添加了属性，单击事件按预期工作。我对javascript仍然非常陌生。你能发布代码的更新版本，以便我能准确了解你的意思吗？谢谢！这是可行的，但不是100%。onclick和data img只是正在添加到第一个复选框。数据img显示为“image8”。我可能需要与j进行另一个循环？请提供更多信息：）对不起，无意中按了“回车”。我编辑了前面的评论。我假设您只想将属性添加到第一个，不管怎样，给我第二个提示是的，需要将属性添加到每个复选框中。谢谢你的帮助！