Question

这应该是自切片面包以来最简单的事情......

我只是想在登录时隐藏我的按钮并显示退出按钮。

jQuery().ready(function($) {
  if ($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("display", "none !important");
    $(".logged-in-button").css("display", "inline !important");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body class="logged-in">
  <li class="menu-item menu-item-type-post_type menu-item-object-page logged-out-button"><a href="http://www.savingaddicts.com/wp-login.php?action=register"><span>Register</span></a>
  </li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page logged-out-button"><a href="http://www.savingaddicts.com/wp-login.php?action=login"><span>Login</span></a>
  </li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page logged-in-button"><a href="http://www.savingaddicts.com/wp-login.php?action=logout"><span>Logout</span></a>
  </li>
</body>

任何帮助表示感谢。

Answer 1

将document添加到您的就绪功能是脚本必须知道它等待的内容，否则它不知道它准备好了什么＆＃34;对于。我删除了重要的标签并修复了jQuery函数，这有效：

jQuery(document).ready(function($) {
  if ($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("display", "none");
    $(".logged-in-button").css("display", "inline");
  }
});

您可以在此处查看代码集：http://codepen.io/erwstout/pen/zqpREW

Answer 2

删除!important值，或者您可以使用$( ".logged-out-button" ).hide(); jquery函数

Answer 3

试试这样：

<li class="menu-item menu-item-type-post_type menu-item-object-page logged- out-button"><a href="http://www.savingaddicts.com/wp-login.php?action=register"> <span>Register</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page logged-out-button"><a href="http://www.savingaddicts.com/wp-login.php?action=login"><span>Login</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page logged-in-button"><a href="http://www.savingaddicts.com/wp-login.php?action=logout"><span>Logout</span></a></li>

$("document").ready(function(){

if ($( ".menu-item" ).hasClass( "logged-in-button")) {
    $( ".logged-out-button" ).css( "display", "none" );
    $( ".logged-in-button" ).css("display", "inline");   
  }
 });

小提琴：http://codepen.io/anon/pen/repJyY

Answer 4

您可以像提及here一样使用.css("cssText", "display:none !important")。

所以你的代码看起来像是：

jQuery(document).ready(function($) {
  if ($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("cssText", "display:none !important");
    $(".logged-in-button").css("cssText", "display:inline !important");
  }
});

JsFiddle

Answer 5

页面无法安全操作，直到文档准备好＆＃34;
jQuery可以为你检测这种准备状态。

等待你的文档准备好使用jQuery：

$(document).ready(function() {
  // your document is ready do something amazing
});

在没有使用jQuery的情况下等待你的文档准备就绪：

document.addEventListener("DOMContentLoaded", function(event) {
  // your document is ready do something amazing
});

等待你的窗口 COMPLETELEY 加载jQuery使用：

$(window).load(function() {
  // your window has completely loaded do something amazing here
});

等待你的窗口加载 COMPLETELEY 而不使用jQuery：

window.onload = function() {
  // your window has completely loaded do something amazing here
};

您的代码无效，因为您没有等待窗口加载或文档准备就绪您可以在代码中添加$.fn.ready(...);，如下所示：

$(document).ready(function() {
  if($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("display", "none");
    $(".logged-in-button").css("display", "inline");
  }
});

您甚至可以等待文档完全加载（图像和所有），如下所示：

$(window).load(function() {
  if($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("display", "none");
    $(".logged-in-button").css("display", "inline");
  }
});

另请注意，您可以使用$.fn.hide(...);和$.fn.show(...)轻松显示和隐藏元素您还可以使用$.fn.toggle(...)

切换元素

您甚至可以在使用以下内容显示或隐藏元素时为元素设置动画：

$.fn.fadeOut(...);
$.fn.fadeIn(...);
$.fn.fadeToggle(...);
$.fn.slideOut(...);
$.fn.slideIn(...);
$.fn.slideToggle(...);

有关jQuery中效果的更多信息，您可以阅读文档here

jQuery的.css（）不起作用

5 个答案: