코드가 잘못된 요소를 애니메이션으로 선택하려고합니다

Question

클릭 한 요소 속성에 저장된 값을 기반으로 다른 요소를 선택하도록 jquery를 시도하고 있습니다. 그러나 클릭 된 요소를 애니메이션으로 유지합니다. element1이라는 이름의 클래스가 여러 개 있기 때문에이 버튼을 사용하여 지정된 div에 애니메이션을 적용하는 가장 쉬운 방법이라고 생각했습니다. 그것은을 무시하는 것처럼

$(".element1").click(function(){ 
    var expander = $(this).attr("id"); 
    var expander2 = '#' + expander; 
    test(expander2); 


}); 

function test(expander3) { 
    if (toggle == true) { 
     $(expander3).animate({height:200}, {queue:false}, "slow"); 
     $(expander3).animate({width:400}, {queue:false}, "slow"); 
     toggle = false; 
    } else if (toggle == false) { 
     $(expander3).animate({height:0}, {queue:false}, "slow"); 
     $(expander3).animate({width:50}, {queue:false}, "slow"); 
     toggle = true; 
    } 
} 

내가 한 경고 (expander2) 내가 올바른 ID를 얻고있다 (예 : # ID 1, # ID2 등 등)하지만 그것은 단지 .element1 애니메이션되고, .element2 등 등 그것은이다 올바른 ID.

여기이 도움이 경우 HTML 보이는 방법은 다음과 같습니다

<input type="button" id="id1" class="element1" value="TextGoesHere"></input> 

<div id="id1"> 
    This should be animating. 
</div> 

Answer 1

귀하의 HTML이 유효하지 다음 id 속성은 고유해야합니다. id을 $("#idThatIsNotUnique")으로 선택하려고하면 div3이 아닌 입력이있는 id과 함께 첫 번째 요소 (또는 일부 브라우저에서는 잠재적으로 마지막 요소)를 찾습니다.

당신은 HTML5 data- 대신 속성을 사용할 수 있습니다 다음

<input type="button" data-animate-id="id1" class="element1" value="TextGoesHere"></input> 

    <div id="id1">This should be animating.</div> 

그리고 JS :

 $(".element1").click(function(){ 
      var expander = $(this).attr("data-animate-id"); 
      var expander2 = '#' + expander; 
      test(expander2); 
     });