时间戳

首页 > 解决方案 > 通过 php 动态创建的具有不同 id 的模型不起作用，但如果我将 id 写为“mymodel”而不是“mymodel [$id]”，则工作正常

javascript - 通过 php 动态创建的具有不同 id 的模型不起作用，但如果我将 id 写为“mymodel”而不是“mymodel [$id]”，则工作正常

问题描述

该模型对于每个 while 循环调用都有一个唯一的 id，因为 id 是随机生成的。对于 while 循环的每次调用，按钮都具有唯一的 id 并且正在调用唯一的模型。但是模型没有通过单击按钮显示。如果我排除为每个模型和按钮提供唯一 id 并给它们一个公共 id，则该模型会显示出来，但在这种情况下，它会为每个按钮单击打开相同的模型。

"<div class='modal fade' id='myModal[$id]' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
        <div class='modal-dialog'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
                    <h4 class='modal-title' id='myModalLabel'>More About $name</h4>
                    </div>
                <div class='modal-body'>
                    <center>
                    <img src='img.jpg' name='dogimage' width='140' height='140' border='0' class='img-circle'>
                    <h3 class='media-heading'>$name</h3>
                    <hr>
                    <center>
                    <p class='text-left'><strong>Age(in months): </strong> $age
                        </p>
                        <p class='text-left'><strong>Weight(in kg): </strong>
                        $weight.</p>
                        <p class='text-left'><strong>Breed: </strong>
                      $breed.</p>
                        <p class='text-left'><strong>Gender: </strong>
                        $gender.</p>
                    </center>
                </div>
                <div class='modal-footer'>
                    <center>
                    <button type='button' class='btn btn-default' data-dismiss='modal'>Know enough about $name</button>
                    </center>
                </div>
            </div>
        </div>
    </div>     
                <div class='container'>
    <div class='row'>
        <div class='col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6'>
         <div class='well profile'>
            <div class='col-xs-12'>
                <div class='col-xs-12 col-sm-8'>
                    <div id='dogrequestmessage'></div>
                    <h2>$name</h2>
                    <p><strong>Breed: </strong> $breed </p>
                    <p><strong>Weight(in kg): </strong> $weight </p>
                    <p><strong>Gender: </strong> $gender </p>
                    <p><strong>Age:(in months): </strong> $age </p>
                </div>             
            </div>            
            <div class='col-xs-12 divider text-center'>
                <div class='col-xs-12 col-sm-4 emphasis'>
                    <button class='btn btn-info btn-block' href='#aboutModal' data-toggle='modal' data-target='#myModal[$id]' name = 'viewprofile[$id]' id= 'view_profile'><span class='fa fa-user'></span> View Profile </button>
                </div>
            </div>
         </div>                 
        </div>
    </div>
</div>"

标签： javascriptphp

解决方案

"<div class='modal fade' id='myModal[$id]'

问题在于 ID 值中使用的方括号。这些需要转义，以创建有效的 CSS 选择器，但用于该功能的库可能不会这样做。

请改用 ID 格式modal_$id。假设 $id 值是数字，这将为您提供可以在 CSS 选择器中使用的 ID，而无需任何额外的转义。

推荐阅读