Question

我有div默认隐藏，当使用点击show链接时，调用以下javascript方法：

function ChangeControlVisibility(elementID) {
    var  element = $("#" + elementID);
    if (element.css('display') != 'block' && element.css('display') != 'table') {
        element.show();
        var tempElement = $('div.expanded');
        if (tempElement.length > 0) {
            tempElement.css('background-image', 'url(../images/arrow1.gif)');
        }
    }
    else {
        element.hide();
        var tempElement = $('div.expanded');
        if (tempElement.length > 0) {
            tempElement.css('background-image', 'url(../images/arrow2.gif)');
        }  
    } 
}

此步骤有效，但是当我在page_load事件中调用前一个方法时，该方法不起作用： element.css（'display'）undefined。

以前的代码是否有问题????

Answer 1

您是否在.ready()处理程序中执行该代码？

顺便说一句，除非你真的需要明确检查显示状态table，否则你可以要求

$(document.ready(function(){
   if (!element.is(':visible')){
   }
   else{
   }
});

参考：.is()，.ready()，:visible

Answer 2

您可以使用.toggle()和:visible selector进行整体简化，如下所示：

function ChangeControlVisibility(elementID) {
  var vis = $("#" + elementID).toggle().is(':visible');
  $('div.expanded').css('background-image', 'url(../images/arrow' + (vis ? '1' : '2') + '.gif)');
}

这会切换可见性（通过封面下的.hide() / .show()）并检查生成的可见性以查看它是否显示在页面中，并根据此设置箭头图像。< / p>

Answer 3

看一下：hidden和：visible jQuery选择器。并尝试这样的事情：

function ChangeControlVisibility（elementID）{ var hiddenElement = $（“＃”+ elementID +“：hidden”）; var element = $（“＃”+ elementID）; if（hiddenElement.length＆gt; 0）{//检查此元素是否存在 hiddenElement.show（）; var tempElement = $（'div.expanded'）; if（tempElement.length＆gt; 0）{ tempElement.css（'background-image'，'url（../ images / arrow1.gif）'）; } } 其他{ element.hide（）; var tempElement = $（'div.expanded'）; if（tempElement.length＆gt; 0）{ tempElement.css（'background-image'，'url（../ images / arrow2.gif）'）; }
} }

隐藏div不起作用？

3 个答案: