함수를 사용하여 외부 파일에서 div를 추가 하시겠습니까?

Question

작업 인트라넷 사이트에 대한 자주 (FAQ) 페이지를 만들고 질문이있는 파일 하나와 관련 답변이있는 파일 하나를 갖고 싶습니다. 따라서 여러 개의 다른 페이지를 편집해야하는 대신 편집 할 페이지가 2 개 밖에 없습니다. 내 외부의 jQuery 스크립트 페이지에

<ul> 
<li><a id="abc" href="#"> question here</a></li> 
<div id="abc1"></div> 
</ul> 

:

$(function() { 
    $('#abc').click(function() { 
     $('#abc1').load('test.php #xyz'); 
}); 

는 그냥 작동 나는 그렇게 문제가 faq.php의 페이지에서 질문에서 답 표시를 클릭 할 때 작업 있어요 괜찮아요 ... 거기에 함수에 넣을 수있는 방법이 있나요? 그래서 모든 새로운 질문 div id에 대해 jQuery의 새로운 블록을 작성할 필요가 없습니까?

Answer 1

ID를 사용하지 마십시오. ID는 고유해야합니다. ID 선택기로 기능을 연결한다면, 구체적 일 것입니다. 우리는 일반적인 솔루션이 필요합니다.

많은 항목에 적용 할 수 있도록 CSS 클래스 선택기를 사용하십시오. 그래서 나는 이렇게 마크 업을 약간 조정할 것이다.

<ul> 
    <li> 
     <a id="abc" href="#" class="q"> question here</a> 
     <div id="abc1" class="a"></div> 
    </li> 
    <li> 
     <a id="abc2" href="#" class="q"> question 2 here</a> 
     <div id="abc2" class="a"></div> 
    </li> 
</ul> 

스크립트

$(function() { 
    $('.q').click(function() { 
     var item=$(this); 
     item.parent().find(".a").load('test.php #xyz'); 
}); 

당신이 특정 질문에 대한 답을 얻기 위해 test.php 페이지에 클릭 된 질문의 ID를 전달하려는 경우 태그의 (ID를 보낼 수 있습니다) 여기서

$(function() { 
    $('.q').click(function() { 
     var item=$(this); 
     var clickedQuestionId=item.attr("id"); 
     item.parent().find(".a").load("test.php?qid="+clickedQuestionId+"#xyz"); 
    }); 
}); 

는 jsFiddle 데모 ( http://jsfiddle.net/EcWFm/11/

,691) 대신 AJAX 호출 방법 않음 정적 텍스트를 사용