Question

我有以下代码：

PHP

<?php include("db.php"); ?>
<html>
    <head>
        <title>Title</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
    </head>
    <body>
        <div align="center">
            <table cellpadding="0" cellspacing="0" width="500px">

            <?php $sql = "SELECT * FROM items ORDER BY ID DESC";
              $items= mysql_query($sql);
              while ($item= mysql_fetch_array($items)){
                  $id = $item[ID]; ?>       

                  <script type="text/javascript">
                      $(function() {
                          $(".<?= $id ?>").click(function() {
                              var element = $(this);
                              var boxval = $("#<?= $id ?>").val();
                              var dataString = 'not='+ boxval;
                              $("#flash").show();
                              $("#flash").fadeIn(200).html('');

                              $.ajax({
                                  type: "POST",
                                  url: "update_data.php",
                                  data: dataString,
                                  cache: false,
                                  success: function(html){
                                      $("ol#update").prepend(html);
                                      $("ol#update li:first").slideDown("slow");                                      document.getElementById('content').value='';$("#flash").hide();
                                  }
                              });
                              return false;
                          });
                      });
                  </script>

                  <tr style="border: solid 4px red;">
                      <td>
                          <div class="<?= $id ?>">
                              <button type="submit" id="<?= $id ?>" name="not" value="<?= $id ?>">BUTTON <?= $id ?></button>
                          </div>
                      </td>
                  </tr>

            <?php } ?>
            </table>
            <div id="flash" align="left"  ></div>
            <ol  id="update" class="timeline"></ol>
            <div id="old_updates"></div>
        </div>
    </body>
</html>

这段代码工作正常，允许我在没有刷新的情况下在sql中插入数据。

但是，我如何将javascript作为外部脚本以及为每个项目传递coretly的变量？

我想像这样重新组织：

PHP

<?php include("db.php"); ?>
<html>
    <head>
        <title>Title</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
    </head>
    <body>
        <div align="center">
            <table cellpadding="0" cellspacing="0" width="500px">

            <?php $sql = "SELECT * FROM items ORDER BY ID DESC";
              $items= mysql_query($sql);
              while ($item= mysql_fetch_array($items)){
                  $id = $item[ID]; ?>       

                  <tr style="border: solid 4px red;">
                      <td>
                          <div class="<?= $id ?>">
                              <button type="submit" id="<?= $id ?>" name="not" value="<?= $id ?>">BUTTON <?= $id ?></button>
                          </div>
                      </td>
                  </tr>

            <?php } ?>

            </table>
            <div id="flash" align="left"  ></div>
            <ol  id="update" class="timeline"></ol>
            <div id="old_updates"></div>
        </div>

        <script src="script.js"></script>
    </body>
</html>

当 script.js 是

时

<script type="text/javascript">
    $(function() {
        $(".<?= $id ?>").click(function() {
            var element = $(this);
            var boxval = $("#<?= $id ?>").val();
            var dataString = 'not='+ boxval;
            $("#flash").show();
            $("#flash").fadeIn(200).html('');

            $.ajax({
                type: "POST",
                url: "update_data.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $("ol#update").prepend(html);
                    $("ol#update li:first").slideDown("slow");
                    document.getElementById('content').value='';$("#flash").hide();
                }
            });
            return false;
        });
    });
</script>

Answer 1

您当前使用的脚本和您想要实现的示例错误。
你不应该这样混合你的脚本。它会导致很多依赖性，并使您的应用程序对任何代码更改都非常敏感。

处理动态元素时，请勿使用id属性。通过为它们提供相同的类来创建一组/多组元素（对于特定操作的行为方式相同）。

Don't use mysql_* functions

按钮：

<button class="my-btn" type="button" value="<?= $id ?>">BUTTON <?= $id ?></button>

提示：如果您不希望提交表单，请在按钮上设置type=button而不是type=submit属性。然后，您不必点击return false;。

<强>的script.js ：

$(function() { $(".my-btn").click(function() { var dataString = $(this).val(); $("#flash").show().fadeIn(200).html(''); $.ajax({ type : "POST", url : "update_data.php", data : {'not' : dataString}, cache : false, success : function(html){ $("#update").prepend(html).find("li:first").slideDown("slow"); $('#content').val(''); $("#flash").hide(); } }); }); });

将变量时的PHP传递给外部JS脚本

1 个答案: