make a for-loop of several js functions

Question

i have several js functions doing the same thing width different values for different divs. Here is the HTML-code:

<input id="kunst_radio1" type="radio" name="kunstmuseum" value="0" checked="checked"  onClick="animateKunst('null')"><label for="kunst_radio1"></label>
<input id="kunst_radio2" type="radio" name="kunstmuseum" value="6794200" onClick="animateKunst('halb')"><label for="kunst_radio2"></label>
<input id="kunst_radio3" type="radio" name="kunstmuseum" value="13588400" onClick="animateKunst('voll')"><label for="kunst_radio3"></label>
<input id="hist_radio1" type="radio" name="hist" checked="checked" onClick="animateHist('null')"><label for="hist_radio1"></label>
<input id="hist_radio2" type="radio" name="hist" onClick="animateHist('halb')"><label for="hist_radio2"></label>
<input id="hist_radio3" type="radio" name="hist" onClick="animateHist('voll')"><label for="hist_radio3"></label>

I have about 15 radio button groups and for each group I have to execute this function with different values:

function animateKunst(val) {
    var div = $('#kunstmuseum');
    if(div.data('originalWidth') == undefined)
    div.data('originalWidth', div.width());

    var width = div.data('originalWidth');

    if (val=="voll")
        width *= .6;
    else if (val=="halb") 
        width *= .8;

    $('#kunstmuseum').animate({width: width}, 500);
    }
function animateHist(val) {
    var div = $('#historisch');
    if(div.data('originalWidth') == undefined)
    div.data('originalWidth', div.width());

    var width = div.data('originalWidth');

    if (val=="voll")
        width *= .7;
    else if (val=="halb") 
        width *= .9;

    $('#historisch').animate({width: width}, 500);
    }

Can I put all the values in an array and then make a for-loop? How can I do that?

QuantumLicht · Accepted Answer · 2014-12-09 00:27:41Z

4

I would slightly modify the ids so that I can reuse them more easily inside my function and define a mapping for your widths.

<script type="text/javascript">

        var mapping = {
            kunst: {
                voll: 0.6,
                halb: 0.8
            },
            hist: {
                voll: 0.7,
                halb: 0.9
            },
            null: {
                voll: 0,
                halb: 0
            }
       };

       function animate(type, val) {

           var div = $('#' + type);
           if ( !div.data('originalWidth') ) {
               div.data('originalWidth', div.width());
           }

           var width = div.data('originalWidth');
           width *= mapping[type][val];
           div.animate({ width: width }, 500);

       }

    </script>

<input id="kunst_radio1" type="radio" name="kunst" value="0" checked="checked" 
    onClick="animate('kunst', 'null')">
<label for="kunst_radio1"></label> 
<input id="kunst_radio2" type="radio" name="kunst" value="6794200"
    onClick="animate('kunst', 'halb')">
<label for="kunst_radio2"></label> 
<input id="kunst_radio3" type="radio" name="kunst" value="13588400" 
    onClick="animate('kunst', 'voll')">
<label for="kunst_radio3"></label> 
<input id="hist_radio1" type="radio" name="hist" checked="checked" 
    onClick="animate('hist', 'null')">
<label for="hist_radio1"></label> 
<input id="hist_radio2" type="radio" name="hist" 
    onClick="animate('hist', 'halb')">
<label for="hist_radio2"></label> 
<input id="hist_radio3" type="radio" name="hist" 
    onClick="animate('hist', 'voll')">
<label for="hist_radio3"></label>

edited Dec 9, 2014 at 0:27

answered Nov 29, 2014 at 23:06

QuantumLicht

2,1933 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gjohn Over a year ago

Beat me to it, but this makes more sense to do it this way than to keep creating more and more animate functions. I would also move the mapping out of the function and perhaps make it a global, since you can then use the mapping to create other functions if necessary.

Felix Over a year ago

@QuantumLicht it doesnt work in Chrome but in safari and firefox, what could be the problem?

QuantumLicht Over a year ago

First of all, I would probably change the "null" keyword to something else. It is a reserved keyword and this is likely why it does not work in chrome. Can you give me more details about what you mean by "doesn't work" ? Can you try and pinpoint exactly what part does not work?

Felix Over a year ago

I changed this value, thanks for suggestion. The animate function doesnt work. If I click on a radio button, in chrome the div size is not changing. See for yourself: labs.tageswoche.ch/budget/budget.html

Felix Over a year ago

@QuantumLicht I found the problem. I had to change the name of the function to animateDiv, maybe in Chrome there is a collision between animate (jQuery function) and the specific animateDiv function

|

Collectives™ on Stack Overflow

make a for-loop of several js functions

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related