-1

同じ情報を繰り返さないように、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>
}

メタ データは Web サイトのユーザーから取得され、各ユーザーのメタ データが個別のモーダルに表示されます。明確にするために、データベースに 10 人のユーザーが存在するため、foreach が 10 回繰り返されるとします。これにより、ユーザーごとに 10 個の個別のボタンが作成され、モーダル ボックスをクリックすると、その中のデータがポップアップ表示されます。

問題は、各ボタンをクリックすると、各モーダルボックスで同じユーザーになることです。各モーダル ボックスに正しいユーザー メタ データが表示されるように、これをどのように設定しますか。simplemodal.js で持続性が false に設定されているかどうかを既に確認しましたが、そうです。

4

2 に答える 2

1

同じモデルボックスに同じメタデータがある理由は、このコード行のためです

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

usingclassは非常に一般的なので、id代わりに各ボタンが独自の場所で使用する必要があります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">

あなた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>
于 2012-04-11T23:53:59.377 に答える
0

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
                });
            });
      },
于 2012-04-13T16:29:30.180 に答える