id를 기반으로 한 jquery 대화 상자 열기

Question

JQuery를 처음 사용합니다.

내가 필요로하는 것은 거의 없다. 교실에서 5 교실이라고 말하고, DB에서 교실을 얻고있다. 내가 좋아하는 형식으로 표시하고

, 사람이 교실 1의 상세 정보를 클릭 할 때

이제

Classroom Name Details 
------------------------------ 
classroom 1  Details 
classroom 2  Details 
classroom 3  Details 
classroom 4  Details 
classroom 5  Details 

, 다음 대화 상자가 열립니다 교실 (1) 각각의 대화의 일부 학생의 세부 사항을 표시하는 열려 있어야합니다 각 교실마다.

딕 바운드 링크에서 예제를 보면 단 하나의 세부 정보 버튼 만 있으면 대화 상자를 열 수 있지만 목록에 기반한만큼 많은 교실이 올지 모릅니다. DB에서 얻을 것이다.

DIV를 대화 상자로 열기 전에 DIV를 클릭하기 전에 클릭해야합니까? 이러한 요구 사항에 대한 일반적인 접근 방법은 무엇입니까?

제발 내가 뭘했는지 말하지 마시고, 필요하다면 제 코드도 붙여 넣으십시오. 하나의 링크에서 하나의 예를 가져다가 내 필요에 맞게 수정했습니다.

일부 링크 나 샘플 및 설명을 가르쳐주세요.

Answer 1

jQuery 대화 상자를 사용할 때 비슷한 문제가 발생했습니다. jQuery 데이터 함수를 사용하여 대화 상자 관련 데이터를 DOM에 저장합니다. 필요에 따라 교실과 세부 정보 간의 관계가 필요합니다.

var fakeData = [{id:"class1",students:[{name:"student1","tel":"12456"},{name:"student2","tel":"12456"}]},{id:"class2",students:[{name:"student3","tel":"12456"},{name:"student4","tel":"12456"}]},{id:"class3",students:[{name:"student5","tel":"12456"},{name:"student6","tel":"12456"}]},{id:"class4",students:[{name:"student7","tel":"12456"},{name:"student8","tel":"12456"}]}]; 

//generate detail buttons and store students data in DOM 
fakeData.forEach(function(element, index, array){ 
    $("#btns").append('<button id="'+element.id+'" class="detail-btn">Classroom '+(index+1)+'</button>'); 
    $("body").data(element.id,element.students); 
}); 

//register click event 
$(".detail-btn").click(function(){ 
    $("#dialog").empty(); 
    var students = $("body").data($(this).attr("id")); 
    students.forEach(function(element,index,array){ 
     $("#dialog").append("<div>"+element.name+"</div>"); 
    }); 
    $("#dialog").dialog("open"); 
}); 

고유 한 데이터 키로 DOM id 특성을 사용했습니다. 특정 상세 버튼을 클릭하면 데이터를 가져옵니다.

HTML에 많은 div를 채우지 않고이 솔루션을 사용하여 대화 상자 인라인 콘텐츠를 동적으로 업데이트 할 필요가 없습니다.

하지만 지금까지는이 솔루션의 부작용이 있는지 모르겠습니다. 어쩌면 누군가가 더 자세한 설명을 할 수 있습니다.

간단한 예제 JSFiddle Demo을 만듭니다.

희망이 도움이 될 것입니다.