Question

我致力于提高网站后端的可用性，将需要重新加载页面的许多功能转移到AJAX控制的弹出窗口中。我遇到的一个问题如下。我有两个产品图片，点击“更多信息”＆＃39;我想将特定图像的信息加载到弹出窗口中。为实现这一目标，每个人都要提供更多信息。按钮需要唯一标识，所以我将按钮上的类设置为这样

<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){

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

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块来处理它们。这是基础框架：

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

从这个例子中，你可以根据'info'推断出你需要的任何额外数据args，并设置一些适用于所有人的静态args。但是，这应该可以让您了解这个事件处理程序如何处理多个信息按钮的单击。

魔术来自于利用$(this)，它引用了点击的按钮，以及任何属性和对象方法。

Javascript里面的一个循环。这是可接受的做法吗？

1 个答案: