个人中心
gpt4 book ai didi

javascript - 为参数值不在当前范围内的元素创建 onclick

转载 作者：行者123 更新时间：2023-12-02 23:19:41 24 4
gpt4 key购买 nike

我希望创建一个元素列表，这些元素本质上会在 div 中列出，并对它们应用 onclicks。我成功地分配了我希望在 onclick 上使用的函数，但是我在将参数传递给我概述的函数时遇到了问题。

为了让事情变得更复杂，我没有将传递给可用函数的变量，在我设置 onclick 将指向的函数时。然而，当我确定要传递哪些变量时，我确实知道变量的名称是什么。

为了帮助演示这种情况，我创建了一个严格满足我的要求的小样本。在示例中，我使用变量“列表”中的 onclicks 创建要显示在页面上的元素。在列表中，我有将出现的标签、单击时将调用的函数，以及包含将传递给函数的变量的另一个变量。在这个例子中，我只使用一个将被调用的函数，但在生产中我将有大量可以调用的不同函数。

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title>Test</title>
  </head>
  <body>   
     <div id="testDiv">

     </div>

     <script>

         var list = [];
         list.push({label: "Hello", func: updateValue, params: "Dog"});
         list.push({label: "Goodbye", func: updateValue, params: "Rubber"}); 

         //values is defined in a later function where this element will be created       
         list.push({label: "Another", func: updateValue, params: values[0]});
         aFunction();

         function aFunction()
         {
             var values = ["a", "b", "c", "d"];
             var containerDiv = document.getElementById("testDiv");

             for(var i = 0; i < list.length; i += 1) 
             {
                 addOptionInUI(containerDiv, list[i]);
             }
         }

         function addOptionInUI(parentContainer, item)
         {
             var newDiv = document.createElement('div');
             newDiv.onclick = item.func;
             newDiv.innerHTML = '<span>' + item.label + '</span>';

             parentContainer.appendChild(newDiv);
         }

         function updateValue(aVariable, maybeAnother)
         {
             var result = "Variable - " + aVariable;

             if(maybeAnother != undefined)
                 result += ", " + maybeAnother + " was also added";

             alert(result);
         }

     </script>
  </body>
</html>

上面的示例可能无法正确设置来执行我的要求。例如，我可能需要将要调用的整个函数表示为字符串并从那里对其进行排序，而不是单独使用 params 和 func 属性，但我不确定这会是什么样子。

不幸的是，我不知道根据我的要求使用正确的术语，因此很难找到解决方案。

此外，公平警察，如果这是根本不应该/不能做的事情。任何帮助将不胜感激，提前欢呼!

最佳答案

我已使用以下内容更新了您的代码:

  • 更新了列表中的项目，以包含带有参数的回调函数，而不是单独传递参数和方法。 Docs
  • 在 updateValue 方法中，我删除了参数定义，现在改为使用arguments 属性，该属性将包含传递的所有参数。 Docs

我假设变量的值没有改变，如果它们改变了，那么我想你必须要么用这些数据成员和函数创建一个类，要么全局声明变量，这可能是一个不好的做法取决于您具体在做什么。

我强烈感觉您要解决的问题比下面的解决方案更复杂，但我希望它能解决您面临的一些问题。

希望以下内容对您有所帮助:

var list = [];
   // Updating the func to be a callback function with the parameters you need to pass
   // https://developer.mozilla.org/en-US/docs/Glossary/Callback_function
   list.push({label: "One parameter", func: () => updateValue("Dog") });
   list.push({label: "Two parameter", func: () => updateValue("Dog", "Rubber") });
   list.push({label: "No parameter", func: () => updateValue() });

   aFunction();

   function aFunction()
   {
       var values = ["a", "b", "c", "d"];
       var containerDiv = document.getElementById("testDiv");

       for(var i = 0; i < list.length; i += 1) 
       {
           addOptionInUI(containerDiv, list[i]);
       }
   }

   function addOptionInUI(parentContainer, item)
   {
       var newDiv = document.createElement('div');
       newDiv.onclick = item.func;
       newDiv.innerHTML = '<span>' + item.label + '</span>';

       parentContainer.appendChild(newDiv);
   }

  // Dont define any parameters here, and use the arguments property to access them
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
   function updateValue() {
      var result = "";
      for (var i = 0; i < arguments.length; i++) {
          result += (arguments[i] + ", ");
      }
      alert(result);
   }
<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title>Test</title>
  </head>
  <body>   
     <div id="testDiv">
     </div>
  </body>
</html>

使用类的替代方法。此示例对数据进行变异，并模拟从数据库加载数据:

class CallbacksAndData {
  constructor(value0, value1, dog) {
    this.values = [value0, value1];
    this.dog = [dog];
  }

  incrementIndex0 = () => {
    this.values[0]++;
    alert(this.values[0]);
  }
  
  decrementIndex1 = () =>  {
    this.values[1]--;
    alert(this.values[1]);
  }
  
  getSum = () =>  {
    if (this.values[1] < 0) {
        alert(`${this.values.join('')} = ${this.values[0] + this.values[1]}`);
    } else {
        alert(`${this.values.join('+')} = ${this.values[0] + this.values[1]}`);
    }
  }

  callbackDog = () =>  {
      alert(this.dog);
  }
}

var callbacks = new CallbacksAndData(1, 2, "pup");
var list = [];
list.push({label: "incrementIndex0", func: callbacks.incrementIndex0 });
list.push({label: "decrementIndex1", func: callbacks.decrementIndex1 });
list.push({label: "getSum", func: callbacks.getSum });
list.push({label: "callbackDog", func: callbacks.callbackDog });

aFunction();

function aFunction() {
  var values = ["a", "b", "c", "d"];
  var containerDiv = document.getElementById("testDiv");

  for(var i = 0; i < list.length; i += 1) {
    addOptionInUI(containerDiv, list[i]);
  }
}

function addOptionInUI(parentContainer, item) {
  var newDiv = document.createElement('div');
  newDiv.onclick = item.func;
  newDiv.innerHTML = '<span>' + item.label + '</span>';

  parentContainer.appendChild(newDiv);
}

function loadFromDatabase() {
    callbacks.values = [20, 30];
}
<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title>Test</title>
  </head>
  <body>   
     <div id="testDiv">

     </div>
     <button id="testDiv" onClick="loadFromDatabase()">
       Load from Database
     </button>
  </body>
</html>

关于javascript - 为参数值不在当前范围内的元素创建 onclick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57001074/

24 4 0
文章推荐： javascript - 带有日期点Start的 Highcharts 区域
文章推荐： r - 如何将大数据导出到 Excel
文章推荐： nitrousio - Nitrous.io 控制台鼠标灵敏度
文章推荐： javascript - 将参数传递给bind()时事件丢失
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com