将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