jQuery .addClass可以在控制台中工作，但不能在代码中工作
jQuery .addClass可以在控制台中工作，但不能在代码中工作
提问于 2017-11-21 01:27:59
我正在尝试向由Shopify的"Buy Button SDK“创建的元素添加一个类。当我通过控制台添加它时，它工作得很好，但当我通过附加的.js文档运行它时，它就不起作用了。它为H1添加了警告和颜色更改，以确保连接正确，而且确实如此。
从这个角度看其他问题，脚本似乎正在尝试操作尚未加载的元素。但是，使用$(document).ready或$(window).on("load“)都不起作用。jQuery在头部调用，在自定义脚本之前。
$(window).on("load", function(){
alert("The page is reading the JavaScript");
$("h1").css("color", "orange");
$(".shopify-buy__product-img-wrapper").addClass("col-md-6");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<script src="http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js"></script>
<script src="script.js"></script>
回答 1
Stack Overflow用户
发布于 2017-11-21 02:43:43
尝试以“Shopify方式”添加类。从BuyButton.js文档中：
var options = {
product: {
contents: {
footer: true,
},
templates: {
footer: '<footer class="{{data.classes.product.footer}}">This is a footer</footer>'
},
classes: {
footer: 'product-footer',
},
styles: {
footer: {
'background-color': 'black'
}
}
}
}您可以在此处查看文档的参考资料http://shopify.github.io/buy-button-js/advanced/
具体地说，要将类添加到具有shopify-buy__product-img-wrapper类的元素中，您可以执行如下操作：
var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
id: the_product_id,
node: document.getElementById('product'),
options: {
product: {
templates: {
img: '<div class="{{data.classes.product.imgWrapper}} new_class_here"><img class="{{data.classes.product.img}}" src="{{data.currentImage.src}}" /></div>'
}
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47397782
复制相关文章
相似问题
腾讯云开发者
