Question

我正在帮助客户使用他们的WooCommerce WordPress网站，当您点击它在新标签页面中打开的类别页面上的产品图片/链接时，他们就会拥有它。我一直在尝试使用jquery来添加它，但还没有成功。我对jquery很新，并且会喜欢任何帮助。

HTML：

<ul class="products">
    <li class="post-6568 product type-product status-publish has-post-thumbnail first sale shipping-taxable purchasable product-type-simple product-cat-designer-watch-special product-tag-tw-steel instock">   <a href="http://harmonyjewellers.ca/product/tw-steel-7823/">

        <img src="http://harmonyjewellers.ca/wp-content/uploads/2014/11/7823595-400x400.jpg" class="attachment-shop_catalog wp-post-image" alt="7823$595" height="400" width="400">
        <h3>TW Steel (#7823)</h3>



    <span class="price"><del><span class="amount">$1,190.00</span></del> <ins><span class="amount">$714.00</span></ins></span>

    </a>

    </li>
</ul>

jQuery的：

$(document).ready(function () {

    var productLinks = $('ul.products img').find('a');
    prodcutLinks.click(function () {
        $(this).attr("target", "_blank");

    });

});

JSFiddle：https://jsfiddle.net/6nbc6zj8/

Answer 1

你不需要jquery ...只需将它添加到链接本身：<a href="#" target="_blank"><img></a>

https://jsfiddle.net/6nbc6zj8/1/

<ul class="products">
    <li class="post-6568 product type-product status-publish has-post-thumbnail first sale shipping-taxable purchasable product-type-simple product-cat-designer-watch-special product-tag-tw-steel instock">   
        <a href="http://harmonyjewellers.ca/product/tw-steel-7823/" target="_blank">            
            <img src="http://harmonyjewellers.ca/wp-content/uploads/2014/11/7823595-400x400.jpg" class="attachment-shop_catalog wp-post-image" alt="7823$595" height="400" width="400"/>
            <h3>TW Steel (#7823)</h3>            
            <span class="price">
                <del><span class="amount">$1,190.00</span></del> 
                <ins><span class="amount">$714.00</span></ins>
            </span>                       
        </a>        
    </li>
</ul>

编辑：如果你不能改变html，那么你想这样做：https://jsfiddle.net/6nbc6zj8/7/

$(document).ready(function () {
    $('.products li a').attr('target', '_blank');
});

您定位products li a元素并在其上添加属性jsut。您当前的代码仅在单击时添加它，但您希望在单击之前添加属性。

Answer 2

你已经有了一个很好的答案，你的问题可能不清楚，但是如果你真的想用jQuery做这件事，我建议这样的事情：

https://jsfiddle.net/6nbc6zj8/8

$(document).ready(function () {


    $('ul.products img').click(function () {
        var productLinks = $(this).closest('a').attr('href');
        window.open(productLinks, '_blank');
        window.focus();

    });

});

Jquery添加到要在新选项卡中打开的链接

2 个答案: