2012-04-24 4 views
2

질문을 클릭했을 때 slideDown 및 Up이라는 답변으로 간단한 FAQ 페이지를 작성하려고합니다. 사용자가 "질문"클래스를 클릭하면 mytarget이 '#'+ [해당 질문의 ID] + 'ans'가되어 적절한 대답이 아래로 내려갑니다.

toggleSlide 부분은 대답의 ID 만 입력하면 작동합니다. .click 함수가 잘못되었거나 $ (this) 또는 두 가지 모두를 사용하고 있는지 확실하지 않습니다.

$(document).ready(function() { 
    var qid = ''; 
    var mytarget = ''; 

    function toggleSlide() { 
     if ($(mytarget).css('display') == 'none') { 
      $(mytarget).slideDown(600, 'swing'); 
     } 

     else if ($(mytarget).css('display') == 'block') { 
      $(mytarget).slideUp(600, 'swing'); 
     } 
    }; 

    $('.answer').hide(); 
    $('.question').click(function() { 
     qid = $('this').id(); 
     mytarget = '#' + qid + 'ans'; 
     toggleSlide(); 
    }); 
});​ 

답변

4

이 시도 :

$(function() { // shorthand for $(document).ready()... 
    $('.answer').hide(); // preferably div.answer if they are all <div>s 
    $('.question').click(function() { 
     // no need to check what it currently is, use slideToggle 
     $('#' + this.id + 'ans').slideToggle(600, 'swing'); 
    }); 
}); 
+0

감사! .answer가 div.answer보다 바람직한 이유는 무엇입니까? – DsDyer

+2

나는 이것을 좋아한다. div.answer는 실제로 바람직하지 않습니다. jsPerf는 요소가없는 일반 클래스가 더 빠름을 보여줄 수 있습니다. 또한 $ (document) .ready()를 사용하는 것은 여전히 ​​좋아합니다. 즉, 문서 준비 함수라는 코드를 누군가 (자신이나 다른 사람)에게 즉시 알기 쉽기 때문입니다. 하지만 그 부분은 개인적인 취향입니다. –

+1

'$ (this) .attr ('id')'=>'this.id'. – gdoron

1

변경에서 :

$('this').id(); 

사람 :

$(this).attr('id') 
  • this 키워드 자바 스크립트가 아닌 문자열입니다.
  • id 함수가 jQuery에 없으면 .attr('id')이라는 ID를 얻습니다.
    id은 DOM 요소의 속성입니다. this.id

$('.question').click(function() { 
    qid = this.id; 
    mytarget = '#' + qid + 'ans'; 
    toggleSlide(); 
});​ 
+0

감사합니다. this.id 도 사용했습니다. – DsDyer

+0

@ user1354606 메모를 읽으십시오. – gdoron

0

하지 마십시오 : qid = $('this').id();

할 : 그래서 당신이 사용할 수있는 작은 따옴표없이 qid = $(this).attr('id');

+0

무엇이'$ (...). id()'입니까? 그러한'id' 함수는 없습니다. – gdoron

+0

@gdoron, 네가 맞아. 이것을 '이것'에 집중 시켰습니다. 이제 올바른 해결책을 제시하십시오. – agarcian

+0

감사합니다. 나는 .id()가 일이라는 생각이 어디 있는지 확신하지 못합니다. 필자는 인터넷없이 자동차 여행을하면서이 편지를 썼다. 나의 휴대 전화에 대한 연구를했으며, 문맥을 읽지 않고 그 기능을 선택 했어야했다. – DsDyer

0
function toggleSlide(mytarget) { 
    if ($(mytarget).css('display')=='none'){ 
     $(mytarget).slideDown(600, 'swing');} 

    else if ($(mytarget).css('display')=='block'){ 
     $(mytarget).slideUp(600, 'swing');} 
}); 

함수를 호출하면 매개 변수를 전달해야합니다.

qid = $(this).id(); 
    mytarget= '#' + qid + 'ans'; 
    toggleSlide(mytarget); 
관련 문제