jQuery的.css（）不起作用

Question

This should be the easiest thing since sliced bread... 这应该是自切片面包以来最简单的事情......

I just want to hide my buttons when logged in and show the log out button. 我只是想在登录时隐藏我的按钮并显示注销按钮。

 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>

Any help appreciated. 任何帮助赞赏。

Answer 1

Adding document to your ready function is a must for the script to know what its waiting for or else it doesn't know what its "ready" for. 将document添加到就绪函数是脚本必须知道它等待的内容，否则它不知道它的“准备好”。 I removed the important tags and fixed the jQuery function and this works: 我删除了重要的标签并修复了jQuery函数，这有效：

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

You can view the codepen here: http://codepen.io/erwstout/pen/zqpREW 您可以在此处查看codepen： http ：//codepen.io/erwstout/pen/zqpREW

Answer 2

remove !important value, or you can use $( ".logged-out-button" ).hide(); remove !important value，或者你可以使用$( ".logged-out-button" ).hide(); jquery function jquery函数

Answer 3

Try like this: 试试这样：

<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");   
  }
 });

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

Answer 4

You can use .css("cssText", "display:none !important") just like mentioned here . 你可以像这里提到的那样使用.css("cssText", "display:none !important") 。

So your code would look like: 所以你的代码看起来像：

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 的jsfiddle

Answer 5

A page can't be manipulated safely until the document is "ready" 在文档“准备就绪”之前，页面无法安全操作
jQuery can detect this state of readiness for you. jQuery可以为您检测这种准备状态。

To wait for your document to become ready in with jQuery use: 要等待您的文档准备好使用jQuery：

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

To wait for your document to become ready in without jQuery use: 在没有使用jQuery的情况下等待文档准备就绪：

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

To wait for your window to COMPLETELEY load with jQuery use: 要等待你的窗口使用jQuery加载COMPLETELEY ：

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

To wait for your window to COMPLETELEY load without jQuery use: 要等待你的窗口加载COMPLETELEY而不使用jQuery：

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

Your code did not work because you did not wait for the window to load or the document to become ready. 您的代码无效，因为您没有等待窗口加载或文档准备就绪。
You can add $.fn.ready(...); 你可以添加$.fn.ready(...); to your code like this: 你的代码是这样的：

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

You can even wait for the document to completely load (images and all) like this: 您甚至可以等待文档完全加载（图像和所有），如下所示：

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

Also remember that you can make showing and hiding elements easier by using $.fn.hide(...); 还要记住，使用$.fn.hide(...);可以更容易地显示和隐藏元素$.fn.hide(...); and $.fn.show(...) . 和$.fn.show(...) 。
You can also toggle elements using $.fn.toggle(...) 您还可以使用$.fn.toggle(...)切换元素

You can even animate elements when you display or hide them using: 您可以使用以下方式显示或隐藏元素时为元素设置动画：

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

For more info on effects in jQuery you can read the docs here 有关jQuery中的效果的更多信息，您可以在此处阅读文档

jQuery的.css（）不起作用

问题描述

5 个解决方案

解决方案1
3 2016-04-08 06:45:47

解决方案2
2 2016-04-08 06:25:22

解决方案3
0 2016-04-08 06:28:29

解决方案4
0 2016-04-08 07:03:40

解决方案5
0

jQuery的.css（）不起作用

问题描述

5 个解决方案

解决方案1 3 2016-04-08 06:45:47

解决方案2 2 2016-04-08 06:25:22

解决方案3 0 2016-04-08 06:28:29

解决方案4 0 2016-04-08 07:03:40

解决方案5 0

解决方案1
3 2016-04-08 06:45:47

解决方案2
2 2016-04-08 06:25:22

解决方案3
0 2016-04-08 06:28:29

解决方案4
0 2016-04-08 07:03:40

解决方案5
0