Question

我有这个显示多个图像的HTML / PHP代码。

     <div class="product-other-images">
                  <?php
                  for($i = 0; $i < sizeof($productImages); $i++)
                  {
                      echo '<a id="alternate-image" href="#"';
                      if($i == 0)
                        echo 'class="active"';
                      echo '><img alt="' . $productName . '" src="' . $productImages[$i][1] . '"></a>';
                  }
                  ?>
              </div>

当你点击一个href时，我想从里面的img中选择src。到目前为止，我有这个代码，当我点击一个href。

    var Item = function () {
return {
    init: function () {
        $(document).ready(function () {
            $('a').click(function () {
                if ($(this).prop('id') == 'alternate-image')
                {
                    var href = $(this).attr('href');
                    alert(href);
                }
            });
        });
    }
};

}();

我需要从图像中取出src并更改另一个img src的主显示图像。

我应该将img src设为jQuery触发器吗？

Answer 1

img是a元素的子元素，所以

$('a').click(function () {
    if (this.id == 'alternate-image') {
        var src= $(this).find('img').attr('src');
        alert(src);
    }
});

您正在循环中创建元素，因此您创建的多个元素具有相同的id，而不是有效的html结构，因为元素的id必须是唯一的。

在你的情况下，而不是使用alternate-image作为id使用它作为一个类然后使用类选择器来定位这些元素，如

$('a.alternate-image').click(function () {
    var href = $(this).find().attr('href');
    alert(href);
});

然后

<div class="product-other-images">
  <?php
  for($i = 0; $i < sizeof($productImages); $i++)
  {
      echo '<a class="alternate-image" href="#"';
      if($i == 0)
        echo 'class="active"';
      echo '><img alt="' . $productName . '" src="' . $productImages[$i][1] . '"></a>';
  }
  ?>
</div>

Answer 2

您无法在页面中复制ID，因此请将ID更改为类。

然后，您可以使用类作为选择器来定位元素：

$('.alternate-image').click(function(e){
   e.preventDefault();// prevent default behavior of <a>
   var src = $(this).find('img').attr('src');
})

jQuery在点击的href中获取img src

2 个答案: