Question

我有一组img个元素，每个元素的id设置为＆＃34; name，id，size＆＃34 ;,其中name，id和size在别处设置。我试图动态删除并分配他们的onclick功能。删除onclick工作得很好。然而，当我去添加onclicks时，它们都崩溃了。我已附上以下相关代码。此代码在for循环中运行，循环遍历所有元素并分配新的onclick函数。

发生的事情很奇怪。出于某种原因，＆＃34; productInfo [1]＆＃34;每个onclick函数的参数被设置为相同的值，具体而言它是列表中的最后一个产品＆＃39;值。我怀疑但无法证明我设置我的onclicks的方式是错误的，但我需要添加参数，这是我见过的唯一方法。对此提出的建议值得欢迎，但也提出了解决问题的建议。

修改此行为的函数：

function imageGrayChange(outIn)
{
  //get the div first
  var i = 0;
  var elem = document.getElementById("imageSlider" + i.toString());
  var grayString = 'margin:auto;max-width: 20vw;filter:opacity(40%);';
  var noGrayString = 'margin:auto;max-width: 20vw;';
  while(elem){ 
    var imgDiv = elem.querySelectorAll('img');
    if(outIn == 1)
    {
      if(imgDiv[0].id.includes("small") && remainingSpace < 1)
      {
        document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].style=grayString;
        document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].onclick="";
      }
      else if(imgDiv[0].id.includes("medium") && remainingSpace < 2)
      {
        document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].style=grayString;
        document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].onclick="";
      }
      else if(imgDiv[0].id.includes("large") && remainingSpace < 3)
      {
        document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].style=grayString;
        document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].onclick="";
      }
    }
    else
    {
      var productInfo = imgDiv[0].id.split(',');
      if(imgDiv[0].id.includes("inStock"))
      {
        if(imgDiv[0].id.includes("medium") && remainingSpace >= 2)
        {
          console.log(productInfo[0] + " " + productInfo[1]);
          document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].style=noGrayString;
          document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].onclick = function(){addToCart(parseInt(productInfo[1]),'medium')};
        }
        else if(imgDiv[0].id.includes("large") && remainingSpace >= 3)
        {
          console.log(productInfo[0] + " " + productInfo[1]);
          document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].style=noGrayString;
          document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].onclick = function(){addToCart(parseInt(productInfo[1]),'large')};
        }
        else if(imgDiv[0].id.includes("small"))
        {
          console.log(productInfo[0] + " " + productInfo[1]);
            document.getElementById("imageSlider" + i.toString()).querySelectorAll('img')[0].onclick = function(){addToCart(parseInt(productInfo[1]),'small')};
        }
      }
    }
    i+=1;
    elem = document.getElementById("imageSlider" + i.toString());
 }

}

最初设置每张图片的html：

<img class="mySlides" src="{{ image | img_url: 'master' }}" style="margin:auto;max-width: 20vw;{{greyedOut}}" onclick="
    addToCart({{product.variants[0].id}},'{{sizeString}}');
    return false" id="{{imageID}},{{inStock}}">

id字段包含＆＃34; productName，id，size，inStock＆＃34;

Javascript将onclick事件分配给多个图像而不指定正确的值

0 个答案: