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

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);
    });

我找到了这个答案，并尝试以下方法：

$('.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 。

1. 为什么在两种情况下我的点击事件都只触发一次？
2. 它与.attr()行为有关吗？ 我检查了文档，但没有发现任何提示仅触发一次的信息。

Answer 1

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

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

或尝试

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

要获得链接，您单击了使用parent()而不是parents() ：

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

当你添加链接到parents()这意味着你改变这一切的一切的HREF a元素，所以当你下次点击任何链接，它会永远是你已经首先点击的人，所以你需要指定申请被点击完全链接，例如仅使用$(this).parent().find('a').attr('href', link);

ps在样式设置background: ; 这不是最好的做法，如果您不使用任何一项，则只需删除使用background: none;的规则即可background: none;

UPDATE ：现在，一旦您更新了html，就可以看到.thumbnail元素的位置，但是答案中的新html元素没有关闭，因此我猜测是为了制作适当的html代码：请参见下面的摘录：

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

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

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你的父母的<a> ，以及重置价值是永远不变的。

TLDR ：代码的逻辑与您想要的逻辑不匹配

编辑 ：

好吧，你的更新后，这证实了在罗马哈比比的回答一些问题，那是你改变了整个<a>的href的S以下.thumbnail容器，如在您的标记，采集spans的父母都位于.thumbnail容器。

您可以使用.first()来修复它-因为要更改的链接只是第一个-像这样：

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

或使用CSS选择器：

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