javascript - 在 querySelector 中使用 php 变量

Question

这可能是基本的，但我已经搜索了半天才能找到有效的答案。我有一个在 while 语句中动态创建的表单(返回许多表单)。我正在使用 jQuery 来获取表单名称，并且我需要为每个表单提供一个唯一的名称，否则它只适用于第一个表单。

我创建了一个动态表单名称，其中每个迭代的末尾都连接有一个数字，并且工作正常，为每个表单提供了唯一的表单名称。现在我想在 querySelector 中使用变量 - 但它需要一个字符串。如何在每个循环中将变量作为字符串传递？如果它在引号中，它会使用键入的字符串，如果我使用变量，它会破坏它。

var form_name = <?php echo '#'.$form_name; ?>;
document.querySelector(**form_name**).addEventListener('submit', function(e) {
var form = this;
more code…

这是完整的代码(其中大部分)

                $watch_num = 0;
                while ($row_watched = mysqli_fetch_row($result_watched))
                {
                    $watch_num = $watch_num + 1;
                    $delete_name = "delete_form".$watch_num;

                    echo '<table width="570" border="0" cellspacing="0" cellpadding="4"'.$background.'>
                      <tr>
                        <td width="148" rowspan="5" align="center" valign="top"><img src="'.$image.'" vspace="4" hspace="6" width="140" height="105" style="padding-top:3px" /></td>
                        <td>Item Number:'.$number.'</td><td align="right">'.$featured.'</td>
                        </tr>
                      <tr>
                        <td colspan="2"><strong>Title: '.$title.'</strong></td>
                        </tr>
                      <tr>
                        <td width="222">Trader: '.$lister.'</td>
                        <td width="176">'.$type.'</td>
                        </tr>
                      <tr>
                        <td>'.$time_status.'</td>
                        <td>'.$price.'</td>
                        </tr>
                      <tr>
                        <td>';
                        if($status == "A" || $status == "X" || $status == "C"){
                        echo '<input name="other" type="button" class="grn_button_small2" id="other" value="More From Seller" onclick="window.location=\'seller.php?sellerid='.$lister.'\'"  />';
                        }

                        if($status == "A"){
                        echo '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="details" type="button" class="grn_button_small2" id="details" value="Details" onclick="window.location=\'details.php?itemid='.$item_id.'\'"  /></td>';
                        }
                        echo '<td><form name="'.$delete_name.'" method="post" action="" id="delete_form">
                            <input type="hidden" id="item" name="item" value="'.$item_id.'" />
                            <input type="submit" class="grn_button_small2" id="delete_btn" name="delete_btn" value="Stop Watching"/>  
                            </form>';
                            echo '</td>
                        </tr>
    ?>
<script>

     jQuery(document).ready(function($) {
var form_name = <?php echo json_encode("#$delete_name"); ?>; 
document.querySelector(form_name).addEventListener('submit', function(e) {
  var form = this;
      var stop_abort = "\nYou didnt stop it";

      e.preventDefault();
      swal({
          title: "Stop",
          text: "Are you sure you want to stop?",
          closeOnClickOutside: false,
          dangerMode: true,
          buttons: [
            'Cancel',
            'Stop'
          ],
        }).then(function(isConfirm) {
          if (isConfirm) {
        swal({
          title: 'Cancelled!',
          text: 'Stopped',
          //icon: 'success'
        }).then(function() {
          form.submit(); // <--- submit form programmatically
        });
      } else {
            swal("Stop  Aborted!", stop_abort);
          }
        });
    });
});
</script>
                <?php
                      </table><hr align="center" color="#D4D8E1" noshade="noshade" />';
         }//end while
        ?>

Answer 1

确保您引用的是您的值。实现此目的的一个简单方法是使用 json_encode，它可以处理转义任何需要转义的值。

var form_name = <?=json_encode("#$form_name")?>;
document.querySelector(form_name).addEventListener('submit', function(e) {
    var form = this;
    //...
});