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