CODEWITHSUNDEEP
javascriptjquery
Felix
Felix

Reputation: 1017

make a for-loop of several js functions

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?

Upvotes: 2

Views: 81

Answers (1)

QuantumLicht
QuantumLicht

Reputation: 2183

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>

Upvotes: 4

Related Questions