php - div 루프에서 jquery 대화 상자 호출

Question

어떻게 루프에서 div의 jquery 대화 상자를 호출합니까?

예를 들어 <p>을 클릭하면 선택한 데이터베이스 사용자의 프로필이 표시됩니다.

예 :

<div id="db-users"> 

    <div id="user-info1"> //db userinfo 1 
    <p>ID#001 John Smith</p> 
    <div id="dialog-box">Profile of John Smith</div> 
    </div> 

    <div id="user-info2"> //db userinfo 2 
     <p>ID#002 John Doe</p> 
     <div id="dialog-box">Profile of John Doe</div> 
    </div> 

</div> 

편집 : 그건 그렇고, 여기에 내가 하나의 대화 상자는 존 스미스, 게재되어 지금까지

$('p').click(function() { 
     $('#dialog-box').dialog({ 

     modal: true, 
     width:560, 
     height: 500, 
     draggable: false, 
     buttons: { 
     Close: function() { 
       $(this).dialog("close"); 
     } 
     } 
    }); 
}); 

한 일이다. 나는 원하는 출력을 내놓을 생각이 없다. 어떤 도움이라도 대단히 감사 할 것입니다. 감사.

EDIT 2 : 모든 div에 ID를 추가하여 각 div를 식별했습니다. 자, jquery를 사용하여 q 대화 상자를 구현하여 이름을 클릭 할 때 정보를 표시하는 방법은 무엇입니까?

Answer 1

제거를 모든 HTML의 ID는 db-users입니다.

클래스는 실제로 필요하지 않지만 스타일을 지정하기 위해 사용하는 경우에는 클래스를 그대로 둘 수 있습니다.

귀하의 HTML은 다음과 같이 표시됩니다 : 당신의 jQuery를에 그런

<div id="db-users"> 
    <div> <!-- db userinfo 1 --> 
     <p>ID#001 John Smith</p> 
     <div>Profile of John Smith</div> 
    </div> 

    <div> <!-- db userinfo 2 --> 
     <p>ID#002 John Doe</p> 
     <div>Profile of John Doe</div> 
    </div> 
</div> 

는 (1.7 가정) :

$('#db-users p').on('click', function(e) { 
    $(this).next('div').dialog({ 
     ... your dialog options ... 
    }); 
}); 

Answer 2

당신은 boths div에 대해 동일한 ID를 사용하고 ID는 유니크는, 어쩌면 당신은이 같은 대화 상자에 대한 클래스를 사용해야됩니다

$('.user-info').click(function() { 
    $(this).find('.dialog-box').dialog({ 
     modal: true, 
     width:560, 
     height: 500, 
     draggable: false, 
     buttons: { 
      Close: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
}); 

HTML :

<div id="db-users"> 
    <div class="user-info"> //db userinfo 1 
     <p>ID#001 John Smith</p> 
     <div class="dialog-box">Profile of John Smith</div> 
    </div> 

    <div class="user-info"> //db userinfo 2 
     <p>ID#002 John Doe</p> 
     <div class="dialog-box">Profile of John Doe</div> 
    </div> 
</div>