jQuery를 : 동적 ID

Question

에 의해 쇼 사업부는이 코드를 가지고 :

<ul> 
    <li><a href="#" class="service-chooser" id="ubuntu-one">Ubuntu One</a></li> 
    <li><a href="#" class="service-chooser" id="ftp">FTP account</a></li> 
</ul> 

<!-- these div are hidden --> 
<div id="ubuntu-one-form" class="hide"> 
    Ubuntu One credential 
</div> 
<div id="ftp-form" class="hide"> 
    Ftp Crediental 
</div> 

내가 링크의 ID를 기반으로 사업부를 보여주고 싶은 링크를 클릭 할 때 :

<script type="text/javascript"> 
$(document).ready(function() { 

$(".service-chooser").click(function() { 
    var service = $(this).attr('id'); 
    var service-id = '#' + service + 'form'; 

     $(service-id).show('slow', function() { 
      // Animation complete. 
     }); 

    }); 

}); 

</script> 

그러나 작동하지 않습니다.

Answer 1

JavaScript의 변수 이름에는 -을 사용할 수 없습니다. 콘솔을 열면 missing ; before statement과 비슷한 오류가 발생했습니다.

변수 이름에 유효한 문자는 영숫자, 밑줄 및 달러 기호입니다.

당신은 _하여 -를 교체하여 코드를 수정할 수 있습니다

$(".service-chooser").click(function() { 
    var service = this.id   ;   // Example ubuntu-one 
    var service_id = '#' + service + '-form'; // Example #ubuntu-one-form 

     $(service_id).show('slow', function() { 
      // Animation complete. 
     }); 
    }); 
}); 

가 나는 또한 this.id으로 $(this).attr('id')을 대체했다.
은 참조 : When to use Vanilla JavaScript vs. jQuery?

Answer 2

귀하의 서비스 ID는 CONCAT 할 필요가있는 '-'또한 서비스 ID가 SERVICE_ID해야 당신의 HTML (<div id="ubuntu-one-form" class="hide">), 당 :

$(".service-chooser").click(function() { 
    var service = $(this).attr('id'); 
    var service_id = '#' + service + '-form'; 

Answer 3

작품 여기 : http://jsfiddle.net/Skooljester/T887t/ 돈 ' 변수 이름에 -이 있고 변수에 a의 ID를 추가 할 때 -을 추가하는 것을 잊어 버렸습니다.