Question

在其他页面（博客等）中列出产品时，寻找从其他页面获取产品价格的方法

我让它与Jquery合作：

$(document).ready(function(){
    $.ajax({ url: "product-url1",
     context: document.body,
     success: function(){
      $("#priceDisplay1").load("product-url1 .price");
    }});
});

但是，如果我显示的产品超过1种，我想尝试节省一些时间来重写每种产品的代码

即

<a href="product-url1"><p>Product Title 1</p></a>
<div id="priceDisplay1"></div>

<a href="product-url2"><p>Product Title 2</p></a>
<div id="priceDisplay2"></div>

<a href="product-url3"><p>Product Title 3</p></a>
<div id="priceDisplay3"></div>

我想要实现的是它可以通过并获取每个的href并运行函数

Answer 1

首先，您应该识别所有<a>和<div>对：

<a href="product-url1" class="iAmAPriceAnchor" data-my-display="priceDisplay1">
    <p>Product Title 1</p>
</a>
<div id="priceDisplay1"></div>

<a href="product-url2" class="iAmAPriceAnchor" data-my-display="priceDisplay2">
    <p>Product Title 2</p>
</a>
<div id="priceDisplay2"></div>

<a href="product-url3" class="iAmAPriceAnchor" data-my-display="priceDisplay3">
    <p>Product Title 3</p>
</a>
<div id="priceDisplay3"></div>

一旦识别出所有对，你就可以迭代它们并做你的事情：

$(document).ready(function(){
    $('.iAmAPriceAnchor').each(function(){
        var priceUrl = $(this).attr('href');
        var myDisplayId = '#' + $(this).data('my-display');
        $.ajax({ 
            url: priceUrl,
            context: document.body,
            success: function(){
                $(myDisplayId).load(priceUrl + " .price");
            }
        });
    });
});

希望有所帮助

Answer 2

通过删除var myUrlId = $(this).id();来实现此功能，因为这只会引发错误并将成功函数中的myUrlId更改为priceUrl

 $(document).ready(function(){
  $('.iAmAPriceAnchor').each(function(){
    var priceUrl = $(this).attr('href');
    var myDisplayId = '#' + $(this).data('my-display');
    $.ajax({ 
        url: priceUrl,
        context: document.body,
        success: function(){
            $(myDisplayId).load(priceUrl + " .price");
        }
    });
  });
 });

从HREF获取.load的URL

2 个答案: