Question

我在WordPress中通过短代码显示一组产品。显示屏有一个图像和按钮。

问题：只有照片包含指向单个产品页面的链接。相关按钮没有指向单个产品页面的链接。

这是当前的代码：

<div class="display-products">
    <div class="wpb_wrapper">
        <div class="displayProduct-shortcode displayProduct-Container">
            <div class="product_grid dp-section dp-group woocommerce" id="displayProduct">
                <div class="dp_product_item dp-col dp-col_1_of_6 firstcol">
                    <div class="dp_images">
                        <a class="dp-product-image" title="Custom Made Wedding Cabinet" href="yahoo.com">
                            <div class="he-wrap tpl1">
                                <div class="dp-img-wrapper"> <img width="192" height="264" alt="#" class="attachment-display_product_thumbnail size-display_product_thumbnail wp-post-image" src="img_src"> </div>
                            </div> <span data-id="696" class="dpquickview dp_quickview_button"><img src="img_src"></span> </a>
                    </div>
                    <div class="dp-product-information clearfix">
                        <h2 class="product-name">
                                <a title="Custom Made Wedding Cabinet" href="#">Custom Made Wedding Cabinet</a>

                            </h2>
                        <div class="dp-stock"></div>
                        <div class="dp-grid-button"> <a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a> </div>
                        <div style="clear: both;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

所需输出：我想以某种方式迭代每个 .single_add_to_cart_button ，并将每个产品名称的链接复制到每个 READ MORE 按钮

这是我当前的jquery代码：

j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').each(function() {
    var getProductLink = j('.display-products .displayProduct-shortcode .dp-product-information .product-name > a').attr('href');
    j(this).attr('href', getProductLink);
});

Answer 1

使用元素上下文设置href属性值。使用closest()遍历dp-product-information元素，然后找到所需的anchor元素，读取其属性并设置值。

使用

j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function(){
    return j(this).closest('.dp-product-information').find('.product-name>a').attr('href');
});

＆＃13;

$(function() {
  $('.dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function() {
    return $(this).closest('.dp-product-information').find('.product-name > a').attr('href');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dp-product-information clearfix">
  <h2 class="product-name">
                            <a title="Custom Made Wedding Cabinet" href="#Test">Custom Made Wedding Cabinet</a>

                        </h2>

  <div class="dp-stock"></div>
  <div class="dp-grid-button">
    <a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a>
  </div>
  <div style="clear: both;"></div>
</div>

＆＃13;

Answer 2

不是使用链接为不同的按钮指定值，而是建议您使用公共类（如果可以），然后为它们触发click事件：

$('.selector').on('click',function(){
   $('.a-selector').trigger('click');
});

如何将锚点的href链接复制到其他锚点？

2 个答案: