javascript - jQuery 在单击时获取 href 中的 img src

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>

当你点击a href的时候，我想从里面的img中选择src。到目前为止，当我点击 a 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>