같은 페이지의 여러 jquery 버튼이 이상하게 작동합니다.

Question

테이블의 각 행에 대해 jquery 모달 팝업 버튼을 배치하려고합니다. 페이지 당 최대 25 개의 버튼이있을 수 있습니다. 각 버튼마다 다른 콘텐츠가 포함 된 대화 상자가 팝업되어야합니다. 행의 ID를 기반으로 데이터베이스에서.

버튼이 루프 밖의 페이지에 한 번 표시되는 경우 제대로 작동하도록 표시 할 수 있지만 루프에 넣는 순간 아주 이상하게 작동합니다. 버튼 중 하나를 클릭하면 동적 콘텐츠가 포함 된 팝업이 표시되지만 종료를 클릭하면 순환이 반복되고 모든 행이 표시 될 때까지 모든 동적 콘텐츠가 표시됩니다.

예를 들어, 버튼 하나를 클릭 할 때 4 개의 행이 있으면 1 행에 대한 내용으로 팝업이 표시되지만 종료를 클릭하면 2 행에 대한 내용이 표시되므로 모두 표시됩니다. 분명히 올바르지 않습니다.

팝업을 한 번만 표시하고 모두를 표시하는 대신 해당하는 ID 만 표시하도록하려면 어떻게해야합니까?

<script> 
// increase the default animation speed to exaggerate the effect 
$.fx.speeds._default = 100000; 
$(function() { 
    $(".jui-dialog").dialog({ 
     autoOpen: false, 
    modal: "true" 
    }); 

    $(".button").click(function() { 
     $(".jui-dialog").dialog("open"); 
     return false; 
    }); 
}); 
</script> 


<begin loop> 

<button class="button">Popup</button> 
<div class="jui-dialog"> 
    <div class="jui-dialog-inner"> 
     <p><?=$id?></p> 
    </div> 
</div> 

<end loop> 

Answer 1

당신이 당신의 DOM을 변경하지 않으려면, 당신이 당신 버튼 이후 대화 선택할 수 있습니다 :

$(".button").click(function() { 
    $(this).parent().children().eq($(this).index()+1).dialog("open"); 
    return false; 
}); 

하지만 당신의 버튼에 ID를 제공하는 청소기 될 것이다 :

를

<button class="button" id="<?=$id?>">Popup</button> 
<div class="jui-dialog" for="<?=$id?>"> 
    <div class="jui-dialog-inner"> 
     <p><?=$id?></p> 
    </div> 
</div> 

$(".button").click(function() { 
    $('.jui-dialog[for="'+this.id+'"]').dialog("open"); 
    return false; 
}); 

Answer 2

당신은 라인을 쓸 때 :

$(".jui-dialog").dialog("open"); 

을3210

즉, "class jui-dialog를 포함하는 모든 요소를 ​​가져 와서 엽니 다."

당신은 이것을 반복하고 있으므로 jui-dialog 클래스와 함께 여러 개의 div가 있다고 가정합니다. 오히려, 당신은 아마 쓸 의미 :

$(this).next(".jui-dialog").dialog("open");