Question

有一种干净的方法可以使用for循环进行多次计算吗？我的javascript程序有一些表（训练），包括练习和重复次数。用户可以通过点击例如按钮25％来改变难度。然后它将重复次数乘以0.25，将其减少到四分之一。

现在我手动完成了这个乘法运算，但随着表格越来越多，它变得很痛苦。任何使用for循环的想法？ ID：s是唯一的。

let difficulty = 1

// Initializing default values 100 %

document.querySelector("#edJumpingJacks").innerHTML = 200;
document.querySelector("#edSquat").innerHTML = 100;

// Eventlisteners for difficulty

document.querySelector("#dif25").addEventListener("click", dif25);
document.querySelector("#dif50").addEventListener("click", dif50);
document.querySelector("#dif75").addEventListener("click", dif75);
document.querySelector("#dif100").addEventListener("click", dif100);

function dif25(){
    difficulty = 0.25;
    document.querySelector("#edJumpingJacks").innerHTML = (200 * difficulty).toFixed(0);
    document.querySelector("#edSquat").innerHTML = (100 * difficulty).toFixed(0);
}
function dif50(){
    difficulty = 0.50;
    document.querySelector("#edJumpingJacks").innerHTML = (200 * difficulty).toFixed(0);
    document.querySelector("#edSquat").innerHTML = (100 * difficulty).toFixed(0);

Answer 1

始终保持代码尽可能简单易读，这一点非常重要。因此，我会简化你的大部分代码，除了按钮本身（除非你打算创建很多）。

创建一个包含元素ID的数组：

document.querySelector("#dif25").addEventListener("click", diff(25));
document.querySelector("#dif50").addEventListener("click", diff(50));
document.querySelector("#dif75").addEventListener("click", diff(75));
document.querySelector("#dif100").addEventListener("click", diff(100));

更改您的点击处理程序以仅支持一个具有难度参数的函数：

function diff (diff) {
    difficulty = diff;
    ids.forEach(function(id) {
        document.querySelector("#" + id).innerHTML = (200 * difficulty ).toFixed(0);
    })
}

在你的函数中，遍历你的id数组：

{{1}}

Answer 2

您最好只使用一个通用函数计算难度并将其附加到元素，然后在按钮的click事件中使用此通用函数。

这应该是你的代码：

Array.from(document.querySelectorAll("#dif25, #dif50, #dif75, #dif100")).forEach(function(btn) {
  btn.onclick = function() {
    diff(parseInt(btn.id.match(/(\d+)$/)[0]));
  }
});

function diff(difficulty) {
  Array.from(document.querySelectorAll("#edJumpingJacks, #edSquat")).forEach(function(el) {
    el.textContent = (200 * difficulty).toFixed(0);
  });
}

<强>解释

document.querySelectorAll("#dif25, #dif50, #dif75, #dif100")将匹配所有按钮，然后动态地将事件附加到它们。

在diff函数中，获取需要使用document.querySelectorAll("#edJumpingJacks, #edSquat")更新的所有元素。

请注意，您最好使用el.textContent更改元素的内容，而不是使用用于更改HTML内容的.innerHTML。

<强>演示：

＆＃13;

Array.from(document.querySelectorAll("#dif25, #dif50, #dif75, #dif100")).forEach(function(btn) {
  btn.onclick = function() {
    diff(parseInt(btn.id.match(/(\d+)$/)[0]));
  }
});

function diff(difficulty) {
  Array.from(document.querySelectorAll("#edJumpingJacks, #edSquat")).forEach(function(el) {
    el.textContent = (200 * difficulty).toFixed(0);
  });
}

＆＃13;

<button id="dif25">dif25</button>
<button id="dif50">dif50</button>
<button id="dif75">dif75</button>
<button id="dif100">dif100</button>

<div id="edJumpingJacks">200</div>
<div id="edSquat">100</div>

＆＃13;

Answer 3

感谢超快的答案。此解决方案非常适合乘法运算。

出现了一个小问题。在代码的最后，我给按下的难度按钮一个CSS类，并使其他灰色。使用此解决方案每个按钮的控制台日志始终为25 。有什么建议吗？

编辑。我明白了。必须在if语句中使用双等号。现在它完美无缺。代码从130行缩减到60行。甜！

// Initializing default values 100 %

document.querySelector("#edJumpingJacks").innerHTML = 200;
document.querySelector("#edSquat").innerHTML = 100;
document.querySelector("#edMountainClimber").innerHTML = 90;
document.querySelector("#edSitUp").innerHTML = 80;
document.querySelector("#edJumpOverPlank").innerHTML = 70;
document.querySelector("#edPushUp").innerHTML = 60;
document.querySelector("#edLunge").innerHTML = 50;
document.querySelector("#edPullUp").innerHTML = 40;

// Eventlisteners for difficulty

let difficulties = [25, 50, 75, 100];
for (let i = 0; i< difficulties.length; i++) {
    document.querySelector("#dif" +difficulties[i]).addEventListener("click", calculateDifficulty(difficulties[i]));
}

function calculateDifficulty(difficulty) {
    return function(e) {

    document.querySelector("#edJumpingJacks").innerHTML = (200 * (difficulty /100)).toFixed(0);
    document.querySelector("#edSquat").innerHTML = (100 * (difficulty /100)).toFixed(0);
    document.querySelector("#edMountainClimber").innerHTML = (90 * (difficulty / 100)).toFixed(0);
    document.querySelector("#edSitUp").innerHTML = (80 * (difficulty / 100)).toFixed(0);
    document.querySelector("#edJumpOverPlank").innerHTML = (70 * (difficulty / 100)).toFixed(0);
    document.querySelector("#edPushUp").innerHTML = (60 * (difficulty / 100)).toFixed(0);
    document.querySelector("#edLunge").innerHTML = (50 * (difficulty / 100)).toFixed(0);
    document.querySelector("#edPullUp").innerHTML = (40 * (difficulty / 100)).toFixed(0);

    // Change active difficulty button
    if (difficulty == 25){
        document.querySelector("#dif25").className = "ui green label";
        document.querySelector("#dif50").className = "ui grey label";
        document.querySelector("#dif75").className = "ui grey label";
        document.querySelector("#dif100").className = "ui grey label";
    } else if (difficulty == 50){
        document.querySelector("#dif25").className = "ui grey label";
        document.querySelector("#dif50").className = "ui yellow label";
        document.querySelector("#dif75").className = "ui grey label";
        document.querySelector("#dif100").className = "ui grey label";
    } else if (difficulty == 75){
        document.querySelector("#dif25").className = "ui grey label";
        document.querySelector("#dif50").className = "ui grey label";
        document.querySelector("#dif75").className = "ui orange label";
        document.querySelector("#dif100").className = "ui grey label";
    } else if (difficulty == 100){
        document.querySelector("#dif25").className = "ui grey label";
        document.querySelector("#dif50").className = "ui grey label";
        document.querySelector("#dif75").className = "ui grey label";
        document.querySelector("#dif100").className = "ui red label";
    }
};
}

用于计算的Javascript for循环

3 个答案: