Question

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

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

Answer 1

而不是使用：

var display = $('.my_account_orders');

将它实现到if语句中，如下所示：

if($('.my_account_orders').css("display") == "none") {

因为最初它试图找到一个名为$ display的变量，所以它会返回未定义的语法错误。

Answer 2

你的if语句中有错误的$。这应该工作：

$(document).ready(function(){ 
    var display = $('.my_account_orders');
    if(display.css("display") == "none") {
        $('.paging-nav').css("display","none");
    }
});

另请注意，您的var display仅匹配具有my_account_orders类的第一个元素，因此如果该类中有多个元素，并且它们不会所有都有相同的显示，你可能会得到意想不到的结果。

Answer 3

试试这个：

$(document).ready(function(){ 
var display = $('.my_account_orders');
if(display.css("display") == "none") {
        $('.paging-nav').css("display","none");
    }
});

Answer 4

我认为检查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/

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

4 个答案: