SimpleModal foreach 循环动态内容

SimpleModal Foreach Loop Dynamic Content

本文关键字：动态 循环 foreach SimpleModal      更新时间：2023-09-26

如何在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>
}

元数据是从网站上的用户中提取的，并在单独的模态中为每个用户显示该元数据。为了澄清起见，假设foreach重复了10次，因为数据库中有10个用户。这将为每个用户创建 10 个单独的按钮，当您单击模态框时，会弹出其中包含其中的数据。

问题是，当您单击每个按钮时，每个模式框中都是相同的用户。您将如何设置它，以便每个模态框显示正确的用户元数据。我已经检查了持久性是否在简单模态中设置为 false.js确实如此。

您在同一模型框中具有相同元数据的原因是因为这行代码

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

使用 class 是非常通用的，因此您应该改用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>
终于让它

工作了，这要归功于 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
                });
            });
      },
相关文章：