时间戳

首页 > 解决方案 > Javascript/JS - 在更改事件循环中动态引用类和变量

javascript - Javascript/JS - 在更改事件循环中动态引用类和变量

问题描述

我正在尝试使用更改事件中使用的类名数组将这个类更改函数列表缩减为一个简洁的循环。

我需要将四个示例 $ ('.[class]').change 函数放入一个循环中。D7codes 数组不会作为动态类更改器读入（我已将 [class] 放在此注释中）。另外，我是否需要一个整体更改功能，以便每次执行循环？

目前它以我想要的方式长期运行，但我需要在整个项目中使用这个自动求和，其他人需要参考，它会变得非常混乱。

此代码在类中查找更改（复选框） - 我没有包含 python 和 html 元素，因为它目前可以正常工作。有四个函数需要在一个循环中。

除了 D7codes 数组中的类名之外，函数中唯一改变的另外两件事是数字，升序，在“问题”和“点击”变量之后 (0-4)


var question0 = 15.99;
var question1 = 20.99;
var question2 = 5.99;
var question3 = 2.99;

var total = 0

var click0 = false;
var click1 = false;
var click2 = false;
var click3 = false;


var click99 = false;

//this array is for the class names (currently the array isn't being used as I've elongated the code back out

var D7codes = [d7-r6,d7-r7,d7-r8,d7-r9]


//the four functions that should be in a loop

$ ('.d7-r6').change( function() {
  click0 = !click0; 
  if (!click99) {
    total += click0 ? question0 : -question0 
  } else { 
    totalOrig += click0 ? question0 : -question0 
  }
  var totalFloat = parseFloat(total).toFixed(2)
  $ ('.asum-total').text(totalFloat);
});

$ ('.d7-r7').change( function() {
  click1 = !click1; 
  if (!click99) {
    total += click1 ? question1 : -question1 
  } else { 
    totalOrig += click1 ? question1 : -question1 
  }
  var totalFloat = parseFloat(total).toFixed(2)
  $ ('.asum-total').text(totalFloat);
});

$ ('.d7-r8').change( function() {
  click2 = !click2; 
  if (!click99) {
    total += click2 ? question2 : -question2 
  } else { 
    totalOrig += click2 ? question2 : -question2 
  }
  var totalFloat = parseFloat(total).toFixed(2)
  $ ('.asum-total').text(totalFloat);
});

$ ('.d7-r9').change( function() {
  click3 = !click3; 
  if (!click99) {
    total += click3 ? question3 : -question3 
  } else { 
    totalOrig += click3 ? question3 : -question3 
  }
  var totalFloat = parseFloat(total).toFixed(2)
  $ ('.asum-total').text(totalFloat);
});

//This next function doesn't need to be in the loop but is referred to so I've //left it in for clarity


$ ('.d7-r99').change( function() {
  click99 = !click99; 
  if (click99) {
    totalOrig = total;
    total = 0;
  } else { 
    total = totalOrig; 
  }
  var totalFloat = parseFloat(total).toFixed(2)
  $ ('.asum-total').text(totalFloat);
});

标签： javascriptarraysloopsclassdynamic

解决方案

最后到达那里：


var total = 0
var click99 = false;

var question = [15.99, 20.99, 5.99, 2.99];
var click = [false, false, false, false];

//classnames
var D7codes = ['.d7-r6','.d7-r7','.d7-r8','.d7-r9']


D7codes.forEach( function( value, index ) {
  $ (value).change( function() {
    click[index] = !click[index];
    if (!click99) {
      total += click[index] ? question[index] : -question[index] 
    } else { 
      totalOrig += click[index] ? question[index] : -question[index] 
    }
    var totalFloat = parseFloat(total).toFixed(2)
    $ ('.asum-total').text(totalFloat);
  });

});


$ ('.d7-r99').change( function() {
  click99 = !click99; 
  if (click99) {
    totalOrig = total;
    total = 0;
  } else { 
    total = totalOrig; 
  };
  var totalFloat = parseFloat(total).toFixed(2);
  $ ('.asum-total').text(totalFloat);
});

Chris G 在评论中也给出了一个很好的答案（我不能将它与我正在使用的软件一起使用，但它可以在我的特定项目之外工作）

推荐阅读