.css JQuery (в) не работает

Это должно быть проще всего с нарезанный хлеб ....css JQuery (в) не работает

Я просто хочу, чтобы скрыть свои кнопки при входе в систему и показать кнопку выхода из системы.

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>

Любая помощь приветствуется.

источник

2016-04-08 Jack Robson

я не вижу никаких причин, почему он не работает. У вас есть ошибки на консоли. – IsraGab

Удаление '! Important' похоже делает трюк: https://jsfiddle.net/w0a1w5m5/1/ – Pimmol

Кстати, я предпочитаю использовать .css ({'display': 'none! Important'}). Вы пробовали с этим синтаксисом? – IsraGab

удалить !important значение, или вы можете использовать функцию $(".logged-out-button").hide(); JQuery

источник

2016-04-08 06:25:22

Что делать, если '! Важно'? – Rayon

выглядит как $ (".logged-out-button") .attr ("style", "display: none! Important"); работает в этом случае –

Что делать, если есть другие встроенные стили? '.attr' заменит их! – Rayon

Попробуйте так:

<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

источник

2016-04-08 06:28:29 Sumanta736

Добавление document к вашей готовой функции является обязательным условием для сценария к знать, что его ждет, иначе он не знает, для чего он «готов». Я удалил важные теги и фиксированной функции JQuery и это работает:

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

Вы можете просмотреть codepen здесь: http://codepen.io/erwstout/pen/zqpREW

источник

2016-04-08 06:45:47 buschschwick

Этот ответ, кажется, работает просто отлично , Кроме того, поскольку я заметил вспышку всех кнопок до их скрытия, вы можете использовать [Modernizr] (https://modernizr.com/) с классом no-js в теге и CSS, как в этом кодексе : http://codepen.io/anon/pen/zqpRWa –

Вы можете использовать .css("cssText", "display:none !important") только как упоминалось here.

Так что ваш код будет выглядеть следующим образом:

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

источник

2016-04-08 07:03:40 user3284463

страница не может манипулировать безопасно, пока документ не будет «готов»
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

источник

2016-04-08 11:24:25

Джек, ответил ли мой ответ? Не возражаете ли вы поделиться, если и как вы решили проблему? –

.css JQuery (в) не работает

ответ

Смежные вопросы