將jQuery UI對話框應用於類

Question

讓本示例使用類有些麻煩。我想每個類都會彈出一個單獨的對話框，其中包含不同的信息，當它們被點擊時... https://jqueryui.com/dialog/#animated

Here是我的小提琴和代碼。

HTML ...

<div class="foo">click me 
    <div class="bar">blahblahblah</div> 
</div> 

<div class="foo">or me 
    <div class="bar">blahblahblah</div> 
</div> 

jQuery的...

$(function() { 
    $(".bar").dialog({ 
     autoOpen: false, 
     show: { 
     effect: "blind", 
     duration: 1000 
     }, 
     hide: { 
     effect: "explode", 
     duration: 1000 
     } 
    }); 

    $(".foo").click(function() { 
     $(this).find(".bar").dialog("open"); 
    }); 
}); 

Answer 1

您可能無法使用類在代碼中打開對話框的方式來使用jQuery UI的對話，因爲$(this).find(".bar")將返回空並且不存在。

嘗試使用內部div元素的id。

<div class="foo" data-id="x1" >click me 
    <div class="bar" id="x1" >blahblahblah X1</div> 
</div> 

<div class="foo" data-id="x2" >or me 
    <div class="bar" id="x2" >blahblahblah X2</div> 
</div> 

-

$(function() { 
    $(".bar").dialog({ 
     autoOpen: false, 
     show: { 
     effect: "blind", 
     duration: 1000 
     }, 
     hide: { 
     effect: "explode", 
     duration: 1000 
     } 
    }); 

    $(".foo").click(function() { 
     var id = $(this).data("id"); 
     $('#'+id).dialog("open"); 
    }); 
}); 

JSFiddle