我正在使用simpleCart js。在客户选择英国或世界其他地方之前,我希望隐藏结帐按钮和运费。这是选择块:
<select id="shippingSelect" onchange="simpleCart.update();">
<option value="nothing" selected="selected">Choose Shipping Location</option>
<option value="uk">UK</option>
<option value="world">Rest of World</option>
</select>
在此之下是运费和结帐按钮:
<div class="place_order" style="display:none">
<span id="simpleCart_shipping" class="simpleCart_shipping"></span>
<a href="javascript:;" class="simpleCart_checkout btnDownload">checkout</a>
</div>
生成购物车的simpleCart脚本:
<script>
simpleCart({
cartColumns: [
{ attr: "name" , label: "Item" },
{ view: "decrement" , label: false , text: "-" },
{ attr: "quantity", label: "Quantity", view: "input"},
{ view: "increment" , label: false , text: "+" },
{ attr: "price", label: "Price"},
{ attr: "total" , label: "Subtotal", view: "currency" }
],
cartStyle: "table",
currency: "GBP",
language: "english-us",
checkout: {
type: "PayPal" ,
email: "email@ddress",
success: "success.html"
},
shippingCustom: function(){
if( $("#shippingSelect").val() == "uk" ){
return 0;
} else {
return 2;
}
}
});
</script>
我以为我可以使用$('.place_order').css('display', 'inline');
来更改内联样式,但我不知道该怎么做,是将它合并到simpleCart脚本中还是让它触发一个单独的脚本?也许有一种更有效的方式?谢谢!
答案 0 :(得分:1)
这是你的意思吗?
$('.simpleCart_checkout btnDownload').hide(); //hide your element upon intial page load
$('#shippingselect').change(function() {
if ($(this).val() != "nothing") {
$('.simpleCart_checkout btnDownload').show(); //show element if shipping option selected
} else {
$('.simpleCart_checkout btnDownload').hide();
}
});
AFAIK在类/ id名称中包含空格是不好的做法。
在我看来,禁用/启用按钮而不是隐藏或显示按钮会更好。
$('.simpleCart_checkout btnDownload').attr('disabled', true);