CSS样式为空

我有一个页面，当用户单击页面上的图像或链接时，应该弹出一个模式（叠加）。当第一次加载页面，模式是空白和隐藏的这个网站：CSS样式为空

<!--// MODAL: ITEM PROFILE //--> 
<div id="profile" class="modal" style="visibility: hidden"> 
</div> 
<!--// OVERLAY //--> 
<div id="overlay" style="visibility: hidden"></div>

当用户点击图片或链接的模式应该使用此功能被触发：

function itemModal(id){ 
var modal = $("#profile"); 
if (modal == null){ 
    alert("Modal not found!"); 
} 

if($(" #profile").style.visibility == "hidden"){ 
    $.ajax 
     (
     { //Ajax call to get item data 
      type: "POST", 
      url: "/organizer/getItem", 
      data: { item_id: id }, 
      dataType: "html", 
      success: function(responseText, textStatus, XHR) 
      { 
      // select the element with the ID profile and insert the HTML 
      $("#profile").html(responseText); 
      $("#profile").style.visibility = "visible"; 
      $("#overlay").style.visibility = "visible" 
      } 
     } 
    ); 
    } 
    else{ //Modal is being displayed, hide it and remove contents 
    $("#profile").html(''); 
    $("#profile").style.visibility = "hidden"; 
    $("#overlay").style.visibility = "hidden"; 
    } 
}

但是，当我点击触发模式时，我收到错误消息Uncaught TypeError: Cannot read property 'visibility' of undefined。我提醒了一下，试图捕捉到这一点，并发现虽然profile元素存在，但它的样式显然不包含为其定义的内联css，以及另一个文件中的大约250行。为什么style属性会显示为空？

来源

2012-07-01 jaimerump

使用css方法，而不是样式。 http://api.jquery.com/css/ if（$（“＃profile”）.css（“visibility”）==“hidden”）...类似那样 –

jQuery对象没有样式属性，因为它们是DOM对象数组（它们具有样式属性）。

要么你想：

SET: $('#overlay').css('visibility', 'hidden') 
GET: $('#overlay').css('visibility')

或

SET: $('#overlay')[0].style.visibility = 'hidden' 
GET: $('#overlay')[0].style.visibility

来源

2012-07-01 19:57:32

我想如果只有一个它只会返回该项目，我永远不会猜到它总是返回一个数组。谢谢！ – jaimerump

您使用的是返回jQuery对象JavaScript的原始元素属性，它不工作，你应该使用css()方法代替：

if($("#profile").css('visibility') == "hidden")

来源

2012-07-01 19:58:03 undefined

您正在将jQuery与原生JavaScript混合使用。

原生HTML元素上有一个style对象，jQuery包装的元素没有。如果您想使用jQuery，请使用

if ($(" #profile").css('visibility') == "hidden")

另外，以下行不会按照您的意图工作。

if (modal == null){

...因为分配给modal值再次是一个jQuery包裹元件。一个jQuery对象，即使不匹配元素，在评估时总是有一个'truthy'值 - 换句话说，它永远不会评估为null，false或任何其他falsy值。而是使用：

if (modal.length){

...或者换句话说，“如果jQuery选择中找到的任何元素......”

最后，作为一个较轻微的点，你不处理模态窗口在真正的意义上。这是DHTML;模式窗口是一种较低级别的浏览器功能，涉及用户在被允许返回到父应用程序（例如警报）之前必须与其交互。

来源

2012-07-01 19:59:08 Utkanos

回答

相关问题