我已添加了一些自定义元素,这些元素将包含在我的WooCommerce帐户页面中,以便与订单历史记录一起显示。不幸的是,页面设置了标签,只显示与活动标签有关的信息。
我对jquery不太熟悉,但我认为使用Jquery来隐藏我在订单历史记录显示为none时添加的div是很简单的。
我在主题的main.js文件中添加了以下脚本:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
当类.my_account_orders显示为none时,它应该更改我添加的div(.paging-nav)以显示none。但它只是不起作用。
这个脚本有什么问题,还是我需要做一些特别的事情来启动它?由于它位于我主题的main.js文件中并且我使用$(document).ready(function()
,我认为它只会加载页面。
对此的任何帮助将不胜感激。
答案 0 :(得分:1)
而不是使用:
var display = $('.my_account_orders');
将它实现到if语句中,如下所示:
if($('.my_account_orders').css("display") == "none") {
因为最初它试图找到一个名为$ display的变量,所以它会返回未定义的语法错误。
答案 1 :(得分:0)
你的if语句中有错误的$。这应该工作:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
另请注意,您的var display
仅匹配具有my_account_orders
类的第一个元素,因此如果该类中有多个元素,并且它们不会所有都有相同的显示,你可能会得到意想不到的结果。
答案 2 :(得分:0)
试试这个:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
答案 3 :(得分:0)
我认为检查css
属性(如显示)以确定元素是否为hidden
是一种非常蹩脚的方法。使用jquery,您可以使用:hidden选择器来确定元素是否为hidden
并返回bool
值。
$(document).ready(function(){
if($('.my_account_orders').eq(0).is(":hidden")) // eq(0) is optional - it basically targets the 1st occurring element with class 'my_account_orders'
{
$('.paging-nav').css("display","none");
}
});