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

我正在努力提高网站后端的可用性，将许多需要重新加载页面的功能转移到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">

我的剧本是

   $(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 ...');
       });
   });
});

$（文档）.ready（函数（）{
//用于保存原始内容的变量
var原始内容=“”；
$（“.layout info-”）。单击（函数（e）{
e、 预防默认值（）；
$.ajax({
url:'product\u image\u ajax.php？action=layout\u info'，
数据：{
产品“”筛选器：“”，
产品名称：“”，
预览图像：“”，
imgName:“，
imgExt:'
}
})
.完成（功能（数据）{
控制台日志（数据）；
var elem=$（'.tooltipster content'）；
var original_content_qty=elem.html（）；
元素衰减（'slow'，function（）{
elem.html（data.fadeIn（'slow'）；
$（“#defaultContent”）.addClass（“隐藏”）；
});
})
.fail（函数（）{
警报（'Ajax提交布局信息失败…'）；
});
});
});

我遇到的问题是，单击类名为layout info orange shirt min的第一个图像会导致在没有AJAX的情况下重新加载整个页面。 我最终发现，因为我的脚本在while循环之外，$tmp_image_name只包含php循环中最后一个图像的名称。 在循环中移动脚本可以使其按我所希望的方式运行。虽然它可以工作，但我不想编写被归类为坏习惯的代码

所以问题是，在这些情况下，将javascript放在php循环内是可以接受的，还是我应该从循环中获得图像数量的计数，然后将其传递给循环外的脚本

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

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

$（“.layout info-”）。单击（函数（e）{

---

因此，脚本知道单击了哪个信息按钮？

在一个处理程序中处理多个事件的基本分解可以通过多种方式完成，但这里有一种方式非常容易

首先，调整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块即可处理所有图像。这是基本框架：

$(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
             ...
           }
       })...
   });
});

$（文档）.ready（函数（）{
$（“.layout info”）。单击（函数（e）{
e、 预防默认值（）；
$.ajax({
url:'product\u image\u ajax.php？action=layout\u info'，
数据：{
...
imgName:$（this.data（'imgName'），//动态
products\u筛选器：，//静态
...
}
})...
});
});

从本例中，您可以推断每个“info”所需的任何额外数据参数，还可以设置一些适用于所有人的静态参数。不过，这应该让您了解这个事件处理程序如何处理多个info按钮的单击

---

魔法来自于利用

$（此）

它指的是被单击的按钮，以及它的任何属性和对象方法。

完全错误，你可以通过同一个类获取所有元素，或者在代码中提供不同的ID，有很多方法可以解决这个问题…@Proxytype我无法通过使用同一个类来获得结果。如果我有一个产品的三个图像，并且每个图像都“更多”，我就可以nfo’button具有相同的类，那么脚本如何知道三个按钮中的哪一个被单击，以及如何将哪些值应用于传递给动作开关中的代码的变量？将图像名称附加到button类的整个要点是使每个按钮都是唯一的。感谢您的洞察力。了解了一些新内容，w这总是一件好事

<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">

$(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
             ...
           }
       })...
   });
});