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

Question

我添加了一些自定义元素，这些元素将包含在我的 WooCommerce 帐户页面中，以便与订单历史记录一起查看。不幸的是，该页面设置了选项卡，仅显示与活动选项卡有关的信息。

我对jquery不是很熟悉，但我认为当订单历史显示为none时，使用jquery隐藏我添加的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 属性（例如 display）以确定元素是否为 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/