Question

我在foreach循环中生成了一组id

<?php foreach ($_Collection as $_item): ?>
    <img class="<?php echo $_product->getId() ?>"  src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(100, 75); ?>" />

我希望能够通过使用生成的类来获取具有ajax的特定div，因为它将在此文档和目标文档中匹配。所以我希望在同一个foreach循环中尝试类似的东西：

$(document).ready(function() {  
var item = "<?php echo $_product->getId() ?>";
$('img .'+item).click(function (){  
$('#result').load('ajax-page .'+item+')
    })

这只是一个例子，但我确信有很多错误。对于一个印刷的东西看起来像......

var item = "156294";
$j('img .'+item).click(function (){ 
    $j('#result').load('ajax-page .item')
    });

对于初学者......如何将 item 变量从此循环中传递给选择器？

Answer 1

我建议更改您的php脚本，将类添加到您的img文件中，然后使用您的img名称作为您的商品ID。所以，而不是

<img class="<?php echo $_product->getId() ?>"  src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(100, 75); ?>" />

你会有类似的东西

<img name="<?php echo $_product->getId() ?>" class="imgBlah"  src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(100, 75); ?>" />

然后，使用jQuery将click事件附加到具有类'imgBlah'的任何图像。使用您提供的脚本，它看起来像这样：

$(document).ready(function() {  

   $('img.imgBlah').click(function () {  
      $('#result').load('ajax-page .' + $(this).attr("name"))
   });

})

Answer 2

这个想法看起来很正确。但只需指出几点：

你不能使用一个数字，例如$ j（'img。'+ item）中的“.156294”可能首先附加一封信
你想用load实现什么（'ajax-page .item'）？也许应该加载（'ajax-page？id ='+ item）

Answer 3

你的代码中的“item”后面有一个stray plus和quote。

Answer 4

您最好的选择是在图片代码上使用“数据选项”属性。创建自定义名称/属性/附加信件是令人厌倦的。 Data-options属性自动解析（通过Jquery＆gt; 1.4.3）到该元素的.data（）json。您可以稍后使用jquery data（）方法轻松访问信息。它还为您提供了存储各种数据的选项，而无需稍后进行后期处理

例如

<img src='blah.png' data-role="page" data-hidden="true" data-options="{id:1234}">

您可以稍后使用此选择器

检索数据

$("img").data('options').id;

所以在您编写图像的PHP循环示例中

<?php foreach ($_Collection as $_item): ?>
    <img class="clickme" data-options="{id:<?php echo $_product->getId() ?>}" src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(100, 75); ?>" />

你的jquery会看起来像这样 - （你不需要在php中生成任何东西）：

$(document).ready(function() {  
//this binds a click to all images with clickme class
$('.clickme').click(function (){
//this gets the id stored for that image
item = $(this).data('options').id
//and this does whatever with that id
$('#result').load('ajax-page.'+item)
    })

有关jquery数据的更多信息http://api.jquery.com/data/

在foreach循环中将变量传递给选择器

4 个答案: