SimpleModal Foreachループ動的コンテンツ

Question

foreachループ内で同じ情報を繰り返さないようにsimplemodalをどのように使用しますか？

例：

foreach($ret as $v) 
{ 
     <div id='osx-modal'> 
     <input type='button' name='osx' value='View' class='osx demo'/> 
     </div> 

     <div id="osx-modal-content"> 
      <div class="close"><a href="#" class="simplemodal-close">x</a></div> 
       <div id="osx-modal-data">                        
        <div id="toon_box"> 

         <div id="toon_name"> 
          <?php echo $v['toon_name'];?> 
         </div> 

      <div id="toon_avatar"> 
          <?php echo '<img src="' . $v['avatar'] . '" alt="" />';?> 
         </div> 
        </div> 
       </div> 
} 

メタデータは、ウェブサイト上のユーザから引き出され、独立したモーダルでユーザ毎にそのメタデータを表示します。ここでは、データベース内に10人のユーザーがいるので、foreachが10回繰り返されているとします。これは、モーダルボックスをクリックすると、その中のデータでポップアップする、各ユーザーのための10の別々のボタンを作成します。

問題は、各ボタンをクリックすると、各モーダルボックス内の同じユーザーになります。各モーダルボックスに正しいユーザーメタデータが表示されるように、これをどのように設定しますか。私はすでに、永続性がsimplemodal.jsでfalseに設定されているかどうかを確認しました。各ボタンには独自のを持っている代わりに、どこがidを使用する必要がありますのでclassを使用してコード

<input type='button' name='osx' value='View' class='osx demo'/> 

のこの行は非常に一般的であるため、

Answer 1

は、最後には感謝をstandup75する動作するようになりました！

jQuery(function ($) { 
    var OSX = { 
     container: null, 
     init: function() { 
       $("[name=osx]").click(function (e) { 
       e.preventDefault(); 
       $(this).parent().next().modal({ 
        overlayId: 'osx-overlay', 
        containerId: 'osx-container', 
        closeHTML: null, 
        minHeight: 80, 
        opacity: 65, 
        position: ['0',], 
        overlayClose: true, 
        onOpen: OSX.open, 
        onClose: OSX.close 
       }); 
      }); 
     }, 

Answer 2

あなたは同じモデルのボックスに同じメタデータを持っている理由は、uniqid

<input type='button' name='osx' value='View' id='os1'/> 
<input type='button' name='osx' value='View' id='os2'/> 

今、あなたの<div id="osx-modal-content">もこの

<div id="osx-modal-content1"> 
<div id="osx-modal-content2"> 

0123のようになります。

あなたjavascriptこの

$("os1").addEvent("click", function(){ 
    var SM = new SimpleModal(); 
     SM.show({ 
     "title":"Title", 
     "contents": $("#osx-modal-content1").html() 
     }); 
}); 


$("os2").addEvent("click", function(){ 
    var SM = new SimpleModal(); 
     SM.show({ 
     "title":"Title", 
     "contents": $("#osx-modal-content2").html() 
     }); 
}); 

のようになります参照すべてがマッピングされている方法を使用することができます？これは、あなたが

は、あなたがより多くの情報が必要なら、私に知らせて、各モデル内の各コンテンツを達成誰が

編集1例

<?php 
$x = 0; 
foreach ($ret as $v) { 
    $x ++; 
    $content = " 
    <script type=\"text/javascript\">addModal($x)</script> 
    <div id='osx-modal'> 
     <input type='button' name='osx' value='View' id='osx{$x}'/> 
     </div> 
     <div id=\"osx-modal-content{$x}\"> 
      <div class=\"close\"><a href=\"#\" class=\"simplemodal-close\">x</a></div> 
       <div id=\"osx-modal-data\">                        
        <div id=\"toon_box\"> 
         <div id=\"toon_name\"> 
         {$v['toon_name']} 
         </div> 
      <div id=\"toon_avatar\"> 
          <img src=\"{$v['avatar']}\" alt=\"\" /> 
         </div> 
        </div> 
       </div>"; 

} 

?> 

<script type="text/javascript"> 
function addModal(x) 
{ 

    $("osx" + x).addEvent("click", function(){ 
      var SM = new SimpleModal(); 
       SM.show({ 
       "title":"Title", 
       "contents": $("#osx-modal-content" + x).html() 
       }); 
     }); 

} 
</script>