容器重定向到 URL 但嵌套锚点转到与容器不同的 URL

Question

所以我在 Shopify 中有一个模板，如果点击它，我会尝试将用户重定向到信息页面。这非常简单，只是该容器中有两个嵌套链接。 'Learn More' 会转到容器应该访问的页面，但 'Buy Now' 按钮不会。它需要转到立即购买页面。

我使用 jQuery 来完成此操作，因为将整个内容嵌套在锚标记中是行不通的。

我目前的 jquery：

$(document).ready(function() {
        $(".cross-sell-img-container").click(
          function() { window.location = $(this).find(".spec").attr("href");
          return false;
        });
        $(".purchase").click(function() {
          window.location = $(this).find(".purchase").attr("href");
          return false;
        });  
        //$(".cross-sell-img-container").click(function() {
          //window.location = $(this).find("a").attr("href");
          //return false;
        //});
      });

returns 如果我点击任何地方，在路线中未定义。

模板如下所示：

<div class="cross-sell-img-container">

    <div class="detailed-cross-sell">

      <a href="{{ product.url }}">
        <p class="detailed-cross-sell-title">{{ "The " | append: product.title }}</p>
      </a>

      <div class="detailed-cross-sell-image-container">
        {{ product.metafields.custom_fields["spec_preview_image"] | replace: '<img', '<img class="detailed-cross-sell-image"' }}
      </div>

      <div class="button-container">
        {% assign shop_url = product.metafields.custom_fields["domehastore.com_link"] %}
        <a href="{% if shop_url %}{{ shop_url }}{% else %}{{ product.url }}#purchasing-area{% endif %}" class="button purchase" target="_blank">
          <span class="add-to-cart__text">Buy Now</span>
        </a>
        <!-- | replace: "/products", "/pages" | append: "-specifications" FP: add after product.url to make go to specs -->
        {% assign link_name = product.url %}
        <a class="button spec" href="{{ link_name }}">
          Learn More
        </a>
      </div>

    </div>

    <div class="preview-cross-sell">
      <a class="preview-image" href="{{ product.url }}">
        {{ product.metafields.custom_fields.cross_sell_preview_image }}
      </a>
    </div>

  </div>

我如何完成我想做的事情？

谢谢！

Answer 1

防止默认并停止在 <a> 单击时传播

$(".purchase").click(function(e) {
    e.preventDefault()
    e.stopPropagation();
    window.location = $(this).find(".purchase").attr("href");    
});

或者对两者使用一个处理程序并检查事件的目标

$(".cross-sell-img-container").click(function(event) {
  var $link = $(event.target).closest('a.purchase');
  if ($link.length) {
    window.location = $link.attr('href');
  } else {
    window.location = $(this).find(".spec").attr("href");
  }

});

容器重定向到 URL 但嵌套锚点转到与容器不同的 URL

Container redirect to URL but nested anchor go to different URL than container

html

javascript

jquery

liquid

shopify