몇 가지 j 함수의 for 루프를 만듭니다.

Question

다른 div에 대해 동일한 값의 다른 값을 사용하는 여러 개의 js 함수가 있습니다.

<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> 

나는 약 15 라디오 버튼 그룹이 각 그룹에 대해 내가 다른 값으로이 기능을 실행해야한다 :

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); 
    } 

는 내가 모든 값을 넣을 수 여기에 HTML 코드입니다 배열을 만들고 for-loop를 만드시겠습니까? 어떻게해야합니까?

Answer 1

필자는 함수 내에서 더 쉽게 재사용 할 수 있도록 ID를 약간 수정하고 너비에 대한 매핑을 정의합니다.

<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>