Question

奇怪的问题。我正在修改商店模板： https://demo.themeisle.com/shop-isle/product-category/clothing/dresses/

此时当您悬停产品图片时，会显示“添加到购物车”按钮。这是。在图片下面有价格

我准备了代码：

var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery(document).ready(function(){
    jQuery.each(from, function(i, el) {
        jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
    });
});

什么都没发生。此代码仅在我设置超时时才起作用：

setTimeout(function() {

var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery(document).ready(function(){
    jQuery.each(from, function(i, el) {
        jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
    });
});

}, 10000);

当然超时它不是解决方案。我试图找出获得最佳行为的最短时间，但这是不可能的。我觉得每个浏览器（和版本......）都需要个性化的时间设置。

我认为经过24小时休息后，我会得到一些明智的想法，但这不起作用，没有更多的想法。

---编辑--- 好的，感谢尖头混合的常见js和jquery - 稍后我会更正。

jQuery(document).ready(function(){
    var from = document.getElementsByClassName("woocommerce-Price-amount amount");  
    jQuery.each(from, function(i, el) {
        jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
        console.log(el);
    });
});

var from应该在ready内，这是合乎逻辑的，但这仍然不起作用。没有效果。如果我在循环console.log中使用它将为我返回el的html代码。

---编辑---

感谢。测试时我发现了一些东西。我想将元素.woocommerce-Price-amount.amount追加到元素.product-button-wrap。但是，如果元素.product-button-wrap最初不在源中，我怎么能这样做呢？这个对象是动态创建的（我不知道如何）。

- 编辑 -

行。我查了JS文件，发现代码添加到DOM .product-button-wrap所以我把代码放在那里，现在一切正常。谢谢你的帮助。

Answer 1

问题是因为您在加载DOM之前运行了代码。您需要检索document.ready事件处理程序中的元素。

另请注意，您有一些奇怪的原生JS和jQuery方法。我建议使用其中一个，比如：

jQuery(function($) { $('.woocommerce-Price-amount.amount').each(function() { $(this).parent().parent().find('.product-button-wrap').append(this); }); });

另请注意，.parent().parent()应该只需拨打一次closest()，但我无法在不看到您的HTML的情况下为您提供相应的示例。

DOM改变 - 没有影响。仅在超时更改时才可见效果

1 个答案: