Geek Answers Handbook

JQuery.css () not working

This should be the easiest thing, as sliced ​​bread ...

I just want to hide my buttons when logging in and show the logout 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>
Run codeHide result

Any help was appreciated.

+4
source share
5 answers

Adding documentto your finished function is a prerequisite for the script to know what is waiting for it, or else it does not know what it is “ready for”. I removed the important tags and fixed the jQuery function and this works:

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

Here you can see the code: http://codepen.io/erwstout/pen/zqpREW

+3
source

!important $( ".logged-out-button" ).hide(); jquery

+2

:

<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

0

.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

0

, .
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

0

More articles:


All Articles