Jquery脚本无法在更改时更改CSS

时间:2016-02-23 22:29:57

标签: javascript jquery css wordpress woocommerce

我已添加了一些自定义元素,这些元素将包含在我的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(),我认为它只会加载页面。

对此的任何帮助将不胜感激。

4 个答案:

答案 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");
    }
});

示例:https://jsfiddle.net/DinoMyte/sgcrupm8/2/