【问题标题】:How to make function repeat x amount of times that user chose in the dropdown如何使函数重复用户在下拉列表中选择的次数
【发布时间】:2021-11-05 16:19:21
【问题描述】:

我遇到了一个简单的任务,即根据用户选择的数字使函数多次运行。我有大约 1000 行带有嵌套函数的 javascript 代码,所以我不能真正修改很多,但这是我认为它的工作原理的简化版本:

function getScales() {
  getOrderData()
} 
getOrderdata() { }

$(document).ready(function () {
  $("#continue").click(function () {
   getScales()
  }
});

据我了解,getScales 函数测量用户放在秤上的包裹的重量,然后 getOrderData 在弹出窗口中填写此信息。同一个文件中还有一些jQuery代码,我认为它会检查权重是否不为0,然后显示按钮“继续”

无论如何,我需要将下拉菜单添加到 getOrderData 功能(它需要在弹出窗口中),例如您需要缩放多少项目。如果用户选择 1,则代码需要立即运行。如果用户选择例如 3,那么我需要循环代码运行 3 次。第一次在此循环中,代码将与现在完全相同,或者就像您在下拉列表中选择 1 一样。第二次和第三次它必须跳过 getOrderData 并只执行用户单击 “继续” 后发生的部分,因为用户不需要再看到弹出窗口了。这是我到目前为止所做的,但我被卡住了,无法弄清楚如何让这个东西工作的逻辑:

    function getScales() {
      if(dropdownIndex == 0){ //if user choose 1 then the process doesn't change
        getOrderData()
      } else {
      repeatTimes(times); //I'm not sure if I need to create for loop or if I can pass the value from the dropdown as a parameter "times" somehow
      }
    } 


getOrderdata() { 

var select = document.getElementById("numOfPieces"); //selecting html element and adding  dropdown options with JS
var options = ["1", "2", "3", "4", "5"]; // I chose to do it this way so I could select dropdown options based on their array index
  
  for(var i = 0; i < options.length; i++) {
      var opt = options[i];
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      select.appendChild(el);
  }

  let times = select.options[select.selectedIndex].value; //This is how I store the selected dropdown option in the variable 
 }


    $(document).ready(function() {
      $("#continue").click(function repeatTimes() {
        getScales()
      }
    });

【问题讨论】:

  • getScales() 在哪里执行?
  • @RoMilton 哦,在 $("#continue").click(function () { } 里面,我会编辑问题 rn
  • 那里看起来有一些循环逻辑:继续按钮执行一个函数repeatTimes(),它执行getScales(),它再次执行repeatTimes()。你确定这是你想做的吗?
  • @RoMilton 我不太确定,我只是将函数命名为 repeatTimes,因为我希望这样我可以传递用户在下拉列表中选择的任何索引,而且如果我需要跳过 getOrderData用户选择的数字超过 1
  • 你考虑过递归吗?

标签: javascript jquery arrays loops


【解决方案1】:

如果您想要以下内容:

  1. 用户从选择列表中选择一个数字,例如3
  2. 用户点击按钮继续
  3. 某些函数执行了 3 次。

这很简单,可以通过Array.from()forEach() 完成:

$(document).ready(function() {
  $("#continue").click(function(){
    const times = parseInt(select.options[select.selectedIndex].value, 10);
    Array.from({ length: times }).forEach(function(_, i){
      // execute some function
      someFunction(i);
    });
  });
});

这是对您问题的快速回答。不幸的是,我无法帮助您完成整个流程。我了解您需要在单击 Continue 后显示各种屏幕,但我需要更深入地了解您的代码库以帮助解决此问题。如果您需要查看您的代码设计,您可以在Code Review 上发布更多代码。祝你好运。

【讨论】:

    猜你喜欢
    • 2014-06-17
    • 1970-01-01
    • 2015-01-09
    • 1970-01-01
    • 1970-01-01
    • 2013-08-10
    • 2021-09-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多