while 循环中的 Javascript。这是可以接受的做法吗？

Question

我正在努力提高我网站后端的可用性，将许多需要页面重新加载的功能移动到 AJAX 控制的弹出窗口中。我遇到的一个问题如下。我有两张产品图片，单击“更多信息”我想将该特定图片旁边的信息加载到弹出窗口中。为此，每个“更多信息”按钮都需要唯一标识，因此我将按钮上的类设置为这样

<img src="includes/languages/english/images/buttons/button_info.gif" border="0" alt="Image Info" title=" Image Info " class="layout-info-orange-shirt-min">

和

<img src="includes/languages/english/images/buttons/button_info.gif" border="0" alt="Image Info" title=" Image Info " class="layout-info-orange-shirt-min_01">

其中 orange-shirt-min 和 orange-shirt-min_01 是变量的内容

$tmp_image_name

我的脚本是

   $(document).ready(function() {
   // Variable to hold original content
   var original_content = '';      
   $(".layout-info-<?php echo $tmp_image_name; ?>").click(function(e){
       e.preventDefault();
       $.ajax({
           url: 'product_image_ajax.php?action=layout_info',
           data: {
            products_filter: '<?php echo $products_filter; ?>',
           products_name: '<?php echo $pInfo->products_name; ?>',
           preview_image: '<?php echo '../'.$preview_image; ?>',
            imgName: '<?php echo $tmp_image_name; ?>',
            imgExt: '<?php echo $products_image_extension; ?>'
            }
       })
       .done(function(data) {
            console.log(data);
       var elem = $('.tooltipster-content');
       var original_content_qty = elem.html();
       elem.fadeOut('slow', function() {
           elem.html(data).fadeIn('slow');
           $("#defaultContent").addClass("hidden");
       });
       })
       .fail(function(){
           alert('Ajax Submit for Layout Info Failed ...');
       });
   });
});

我遇到的问题是，单击类名称为 layout-info-orange-shirt-min 的第一张图片会导致在没有 AJAX 的情况下重新加载整个页面。我最终发现，因为我的脚本在 while 循环之外，所以 $tmp_image_name 只包含 php 循环中最后一张图像的名称。将脚本移动到循环内使其按我的意愿运行。虽然它有效，但我不想编写被归类为不良做法的代码。

所以问题是，在这种情况下，在 php 循环中使用 javascript 是否可以接受，或者我应该从循环中获取图像数量的计数，然后将其传递给循环外的脚本？

如果我确实需要从 php 传递一个像 $i 这样的值，如何将它合并到

$(".layout-info-<?php echo $tmp_image_name; ?>").click(function(e){

以便脚本知道点击了哪个信息按钮？

Answer 1

在一个处理程序中处理多个事件的基本分解可以通过多种方式完成，但这里是一种相当容易工作的方式。

首先，调整您的 img 按钮以在属性中包含一段数据，如下所示:

<img src="includes/languages/english/images/buttons/button_info.gif" 
 border="0" alt="Image Info" title=" Image Info" 
 class="layout-info" data-imgname="orange-shirt-min">

<img src="includes/languages/english/images/buttons/button_info.gif" 
 border="0" alt="Image Info" title=" Image Info" 
 class="layout-info" data-imgname="orange-shirt-min_01">

这里的关键变化是所有图像都有一个通用类(与事件处理程序相关)。现在，您只需要一个 javascript block 即可处理所有这些。这是基本框架:

$(document).ready(function() {  
   $(".layout-info").click(function(e){
       e.preventDefault();
       $.ajax({
           url: 'product_image_ajax.php?action=layout_info',
           data: {
             ...
             imgName: $(this).data('imgname'), // dynamic
             products_filter: <?php echo json_encode($products_filter);?>, // static
             ...
           }
       })...
   });
});

从这个例子中，您可以根据“信息”推断出您需要的任何额外数据参数，还可以设置一些适用于所有人的静态参数。然而，这应该让您了解这个事件处理程序如何处理多个信息按钮的点击。

魔法来自于使用 $(this)，它指的是被点击的按钮，以及它，任何属性和对象方法。