Question

我做了一个小项目并遇到了一个小问题。我从MySQL数据库数据中打印出一张表。

其中一个字段是图片。我把它打印出来，我希望它在点击时弹出，但我所能做的只是执行一次脚本，这意味着点击时只会弹出页面上的第一张图片。

<div id="contentRight">

    .......

    <tr>
      <td align="center" valign="top">
        <?php do { ?>
            <table width="630" border="1" class="TableStyle">
              <tr>
    ........
        <script>
        $(document).ready(function() {
           $('#img').on('click','.btn', function ()  {
              var image = '<img src="<?php echo $row_ManageUsers['preview_thumb']; ?>">';
              $('#popover').popover({placement: 'bottom', content: image, html: true});
           });
        });
        </script>
                <td width="100" height="100" rowspan="3" id="img"><a id="popover" class="btn" rel="popover" data-content="" title="Preview" >
                <img src="<?php echo $row_ManageUsers['preview_thumb']; ?>" width="130px" height="130px" class="img-thumbnail" $nbsp;></a>
              </td>
              </tr>

    .......
          <?php } while ($row_ManageUsers = mysql_fetch_assoc($ManageUsers)); ?> 
    .......

脚本被复制并且每次都获得正确的值但它不会执行。

有什么建议吗？

Answer 1

如果您每{{}}}输出<td id="img">，那就是您的问题。 ID必须是唯一的，因此jQuery只会在点击发生时找到<td>的第一个实例。

将#img更改为id="img"并更改此内容：

class="img"

到此：

$('#img').on('click','.btn', function ()...

这应该可以解决问题。

此外，这里有关于ID和HTML5规范的信息：

http://www.w3.org/TR/html5/elements.html#the-id-attribute

id属性指定其元素的唯一标识符（ID）。该 value必须在元素的主子树中的所有ID中唯一并且必须至少包含一个字符。该值不得包含任何空格字符。

Answer 2

尝试为代码提供更多结构，并将HTMl和JS部分分开。

通过循环或任何方式输出表格行并删除ID并使用CLASSES。 ID必须在文档中是唯一的。同时删除宽度和高度，并在CSS中执行此操作。你的行看起来应该是这样的：

<tr>
   <td rowspan="3">
      <a class="btn" rel="popover" title="Preview" >
         <img src="<?php echo $row_ManageUsers['preview_thumb']; ?> />"
      </a>
   </td>
</tr>

测试上面的代码，你应该看到图像。下一步是编写jQuery部分。

<script type='text/javascript'>
   $(document).ready(function() {
      $('.btn').on('click', function (){
         var image = '<img src="' + $(this + ' img').attr('src') + '" />';
         $(this).popover({
            placement: 'bottom',
            content: image,
            html: true
         });
      });
   });
</script>

这部分是在你加载jQuery的部分后放入HTML的HEAD。

我还没有测试过代码。

TIPP：如果您不确定解决问题，请将其剪切成小块，编写代码并进行测试。最后将所有小部件放在一起。

jQuery多次执行脚本

2 个答案: