Question

我有jQuery更改<a>标记的href属性，但它只运行一次

这就是我所拥有的：

JS：

$('.swatch span').click(function(e) {
      e.preventDefault();
      var link = $(this).parents().attr("href");
      if($(this).data("image").indexOf("no-image") == -1) {
        $(this).parents('.thumbnail').find('img').attr('src', $(this).data("image"));
        $(this).parents('.thumbnail').find('img').attr('srcset', $(this).data("image"));
      }
      $(this).parents('.thumbnail').find('a').attr('href', link);
    });

I found this answer and tried below:

$('.swatch span').on('click', function(e) {
      e.preventDefault();
      var link = $(this).parents().attr("href");
      if($(this).data("image").indexOf("no-image") == -1) {
        $(this).parents('.thumbnail').find('img').attr('src', $(this).data("image"));
        $(this).parents('.thumbnail').find('img').attr('srcset', $(this).data("image"));
      }
      $(this).parents('.thumbnail').find('a').attr('href', link);
    });

HTML /标记：

<div class="one-third column alpha thumbnail even" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Product">
<!-- the link below needs to change -->
  <a href="/collections/polarized/products/product" itemprop="url">
    <div class="relative product--product collection--443303820 product_image">
      <img src="//cdn.shopify.com/s/files/1/2321/4605/products/013_a-_g__72_380x@2x.jpg?v=1504208271" class="transition-in lazyloaded">

 <div class="collection_swatches">         
    <a href="/collections/polarized/products/product?variant=44459262348" class="swatch">
      <span data-image="//cdn.shopify.com/s/files/7/2221/2305/products/store_013_a-_g__72_480x.jpg?v=1504208271" style="background-color: ; background-image: url(//cdn.shopify.com/s/files/7/2221/2305/products/store_013_a-_g__72_480x.jpg?v=1504208271); background-position: center; background-size: contain"></span>
    </a>

    <a href="/collections/polarized/products/product?variant=44459262476" class="swatch">
      <span data-image="//cdn.shopify.com/s/files/7/2221/2305/products/store_013_a-_b__72_480x.jpg?v=1504208271" style="background-color: ; background-image: url(//cdn.shopify.com/s/files/7/2221/2305/products/store_013_a-_b__72_480x.jpg?v=1504208271); background-position: center; background-size: contain"></span>
    </a>

    <a href="/collections/polarized/products/product?variant=44459262668" class="swatch">
      <span data-image="//cdn.shopify.com/s/files/7/2221/2305/products/_a-_g__72_480x.jpg?v=1504208271" style="background-color: ; background-image: url(//cdn.shopify.com/s/files/7/2221/2305/products/store_003_a-_g__72_480x.jpg?v=1504208271); background-position: center; background-size: contain"></span>
    </a>
</div>

不能工作。

每次点击都会输入console.log('clicked') clicked。

为什么我的点击事件在两个实例中只触发一次？
是否与.attr()行为有关？ I checked documentation但是没有看到任何暗示它只会发射一次的内容。

Answer 1

$(this).parents('.thumbnail').find('a').attr('href', link);

不会导致html中的链接，因为您的html父级中没有与this相关的任何缩略图类，因为this是a span您已点击，或者您需要添加一些类thumbnail，

的元素

或尝试

$(this).parents().find('a').attr('href', link);

获取您点击的链接，使用parent()代替parents()：

var link = $(this).parent().attr("href");

当您添加指向parents()的链接时，这意味着您要更改所有a元素的所有href，因此当您在任何链接上单击下次时，它将始终是您首先单击的那个，所以你需要指定完全应用点击链接的位置，例如仅使用$(this).parent().find('a').attr('href', link);

P.S。样式设置background: ;不是最好的做法，如果你不使用，只需删除规则使用background: none;

更新：现在，一旦您更新了html，就可以看到.thumbnail元素的位置，但是答案中的新html元素没有关闭，所以我有猜测是为了制作正确的HTML代码：见下面的剪辑：

＆＃13;

$('.swatch span').on('click', function(e) {
          e.preventDefault();
          var link = $(this).parent().attr("href");
          if($(this).data("image").indexOf("no-image") == -1) {
            $(this).parents('.thumbnail').first().find('img').first().attr('src', $(this).data("image"));
            $(this).parents('.thumbnail').first().find('img').first().attr('srcset', $(this).data("image"));
          }
console.log(link);
        // update all a hrefs of all .thumbnail parents:
        //  $(this).parents().find('.thumbnail').find('a')[0]).attr('href', link);
          // update only the first a href of all .thumbnail parents
          $(this).parents('.thumbnail').first().find('a').first().attr('href', link);
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="one-third column alpha thumbnail even" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Product">
<!-- the link below needs to change -->
  <a href="/collections/polarized/products/product" itemprop="url">
    <div class="relative product--product collection--443303820 product_image">
      <img src="//cdn.shopify.com/s/files/1/2321/4605/products/013_a-_g__72_380x@2x.jpg?v=1504208271" class="transition-in lazyloaded">
    </div>
  </a>

 <div class="collection_swatches">         
    <a href="/collections/polarized/products/product?variant=44459262348" class="swatch">
      <span data-image="//cdn.shopify.com/s/files/7/2221/2305/products/store_013_a-_g__72_480x.jpg?v=1504208271" style="background-color: ; background-image: url(//cdn.shopify.com/s/files/7/2221/2305/products/store_013_a-_g__72_480x.jpg?v=1504208271); background-position: center; background-size: contain">link1</span>
    </a>

    <a href="/collections/polarized/products/product?variant=44459262476" class="swatch">
      <span data-image="//cdn.shopify.com/s/files/7/2221/2305/products/store_013_a-_b__72_480x.jpg?v=1504208271" style="background-color: ; background-image: url(//cdn.shopify.com/s/files/7/2221/2305/products/store_013_a-_b__72_480x.jpg?v=1504208271); background-position: center; background-size: contain">link2</span>
    </a>

    <a href="/collections/polarized/products/product?variant=44459262668" class="swatch">
      <span data-image="//cdn.shopify.com/s/files/7/2221/2305/products/_a-_g__72_480x.jpg?v=1504208271" style="background-color: ; background-image: url(//cdn.shopify.com/s/files/7/2221/2305/products/store_003_a-_g__72_480x.jpg?v=1504208271); background-position: center; background-size: contain">link3</span>
    </a>
 </div>

</div> <!-- .thumnail div closed here-->

＆＃13;

Answer 2

虽然您没有在HTML标记中包含parents('.thumbnail')的位置，但我仍然可以猜测您的代码中会发生什么。

真正发生的是这样的：

<div class="collection_swatches">         
    <a href="some-link-1" class="swatch">
        <span data-image="some-img-1" style="some-bg-img-css-1"></span>
    </a>

    <a href="some-link-2" class="swatch">
        <span data-image="some-img-2" style="some-bg-img-css-2"></span>
    </a>

    <a href="some-link-3" class="swatch">
        <span data-image="some-img-3" style="some-bg-img-css-3"></span>
    </a>
</div>

当我点击第一个span时，var link = $(this).parent().attr("href");将结果为var link = 'some-link-1'

接下来检查span上是否有图像，如果有，请更改标记中某个.thumbnail容器上的图像：

if($(this).data("image").indexOf("no-image") == -1) {
    $(this).parents('.thumbnail').find('img').attr('src', $(this).data("image"));
    $(this).parents('.thumbnail').find('img').attr('srcset', $(this).data("image"));
}

然后您更改了该容器中<a>的链接，这与<a>一个var link并不相同

$(this).parents('.thumbnail').find('a').attr('href', link);

并且您重复每次点击，因此var link = $(this).parent().attr("href");的通话会反复导致相同的链接，在这种情况下，它会一直'some-link-1'结果。

所以会发生这样的情况：点击是否正确触发，即将标记中某处的href替换为您父href的{{1}}，以及替换值总是一样的。

TLDR ：您的代码逻辑与您希望的逻辑不匹配

修改：

好的，在您更新后，这确认了Roman Habibi的答案中的一些要点，即您更改了<a>容器下方的整个<a> href，如您所示标记，集合.thumbnail的父母位于spans容器下。

您可以使用.thumbnail修复它 - 因为您要更改的链接只是第一个 - 如下所示：

.first()

或使用css选择器：

$(this).parents('.thumbnail').find('a').first().attr('href', link);

通过jquery click事件设置href仅触发一次

2 个答案: