Javascript/JS - Referring to classes and variables dynamically within a change event loop

Jay

I'm trying to cut down this list of class change functions to one neat loop using an array for the class names used in the change event.

I need to put the four example $ ('.[class]').change functions into a loop. The D7codes array doesn't read in as a dynamic class changer (where I've put [class] in this comment). Also, do I need an overall change function so the loop executes each time?

Currently it works in long hand how I want it to, but I'm going to need to use this autosum throughout a project that other people will need to refer to, and it's going to get really messy.

This code looks for change (check box) in a class - I haven't included the python and html elements because it works correctly currently. There are four functions that need to be in a loop.

Apart from the class names in the D7codes array the only other two things that change within the functions are the numbers, ascending, after the 'question' and 'click' variables (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);
});

Jay

Got there in the end:


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 gave a great answer in the comments also (I couldn't use it with the software I'm using but it would work outside of my particular project)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related