Не работает if
Привет.
Проблема в том, что нужно проверить свойство display у элемента. Но if не работает, точнее "chek1" не принтется, хотя если посмотреть код страницы, то - id="block-links" style="display: none;". Вот код -
$('#open-close').show();
$('#block-links').hide();
$('#open-close').click(function(e) {
e.preventDefault();
$('#block-links').slideToggle();
$('.canDisable').css('pointer-events', 'none');
hideChek();
});
function hideChek(){
console.log("chek");
if ( $('#block-links').css('display') == 'none' ){
console.log("chek1");
$('.canDisable').css('pointer-events', 'auto');
}
}
Вот так при загрузке документа chek1 принтется, но функцию вызвать не получается. Как вызвать подобную функцию?
$("#block-links").each(function hideChek(){
console.log("chek");
if ( $(this).css('display') == 'none' ){
console.log("chek1");
$('.canDisable').css('pointer-events', 'auto');
}
});
|
cadijob,
проверять css('display') надо до анимации или после e.preventDefault(); тут $('#block-links').slideToggle(или тут); |
Цитата:
|
Цитата:
('#open-close').click(function(e)
|
cadijob,
:-? |
Что?)
|
Цитата:
а когда != hidden то - $('.canDisable').css('pointer-events', 'none'); |
cadijob,
$('#open-close').click(function(e) {
e.preventDefault();
if ( $('#block-links').is('hidden') ){
$('.canDisable').css('pointer-events', 'auto');
}
else $('.canDisable').css('pointer-events', 'none');
$('#block-links').slideToggle();
});
|
cadijob,
это можно записать и без if ... else:
$('.canDisable').css('pointer-events', ['auto', 'none'][+$('#block-links').is('hidden')]);
|
Цитата:
$('#open-close').click(function(e) {
e.preventDefault();
if ( $('#block-links').is('hidden') ){
console.log("auto");
$('.canDisable').css('pointer-events', 'auto');
}
else {
$('.canDisable').css('pointer-events', 'none');
console.log("none");
}
$('#block-links').slideToggle();
});
Только none принтит... Даже когда скрываю элемент. |
Цитата:
$('#open-close').click(function(e) {
e.preventDefault();
$('.canDisable').css('pointer-events', ['auto', 'none'][+$('#block-links').is('hidden')]);
$('#block-links').slideToggle();
});
? |
cadijob,
делайте минимальный макет, только самое необходимое. |
Цитата:
|
cadijob,
я двоеточие забыл :) is(' тут hidden') можно так
$(function() {
$("#open-close").show();
$("#block-links").hide();
$("#open-close").click(function(a) {
a.preventDefault();
$("#block-links").slideToggle(400, function() {
$(".canDisable").css("pointer-events", ["none", "auto"][+$(this).is(":hidden")])
})
})
});
или так
$(function() {
$("#open-close").show();
$("#block-links").hide();
$("#open-close").click(function(a) {
a.preventDefault();
$(".canDisable").css("pointer-events", ["auto","none"][+$("#block-links").is(":hidden")])
$("#block-links").slideToggle(400)
})
});
|
Шикарно. Спасибо большое.
Ещё вопрос: вот когда ссылка на теги отключена, jQuery и Ajax могут взаимодействовать с этими элементами? |
Цитата:
|
А как это называется -
["none", "auto"][+$(this).is(":hidden")])
? Я так понял что в одной строке помещаться целое условие(зависимость от hidden), можно туда ещё переменную поставить, что бы также от него зависела?Хотелось бы изучить. |
cadijob,
:blink: массив это называется, is(":hidden") возвращает true/false alert(+false) alert(+true) alert(["none", "auto"][+false]) alert(["none", "auto"][+true]) |
cadijob,
Цитата:
|
Вот так сделал:
OpenArea=[+$(this).is(":hidden")];
console.log(OpenArea);
Как сделать, чтобы в переменную заносил не 0 и 1, а true и false и, если это важно для дальнейшей работой с переменной без []? |
Цитата:
|
OpenArea=[$(this).is(":hidden")];
вот так надо |
Цитата:
|
Цитата:
$(".canDisable").click(function() {
alert("ok");
if (OpenArea == false) {
console.log(OpenArea);
$(this).css( "transform", "scale(0.85)" );
}
});
Даже alert не работает. А когда pointer-events: auto; то alert работает. Тогда как отключить ссылку? |
cadijob,
$("li").on("click", function() {
alert($("a", this).text());
})
|
Цитата:
|
cadijob,
можно только гадать, что вы хотите сделать ...
$(function() {
$("#open-close").show();
$("#block-links").hide();
$("#open-close").click(function(a) {
a.preventDefault();
$("#block-links").slideToggle(400)
})
$(".canDisable").on("click", function(a) {
if ($("#block-links").is(":visible")) a.preventDefault();
})
});
|
Цитата:
|
cadijob,
не понимаю |
Цитата:
$(".tags li").on("click", function(){
alert($("a", this).text());
// if (OpenArea == false) {
// console.log(OpenArea);
// $(this).css( "transform", "scale(0.85)" );
// }
});
То есть эта функция не будет работать. Когда display != none то будет.
if(OpenArea == false){
$(".tags li").on("click", function(){
alert($("a", this).text());
// if (OpenArea == false) {
// console.log(OpenArea);
// $(this).css( "transform", "scale(0.85)" );
// }
});
}
Пример выше не работает. |
cadijob,
не понимаю!!! видимо более ничем помочь не могу. |
cadijob,
if(OpenArea == false), это для упертых. ) 0 - это тоже false, а 1 - это тоже true, если проверяется истина/ложь (булево значение), то есть писать if(OpenArea == false), это мягко говоря лишние хлопоты, так как если OpenArea равна или 0 или false, то if(!OpenArea) в обоих случаях вернет true. Бывает, что например функция может возвращать как 0 так и false, в этом случае проверка if(!name(props)) не годится, вот тогда проверять нужно не только значение, но и тип: if(OpenArea === false) и это называется строгим сравнением. У вас же проблемы не потому что вместо true ноль или наоборот, а в том, что где-то логика кода вашего не соответствует ожиданиям. |
Цитата:
Сделал так -
if (OpenArea === false) {
$(".tags li").on("click", function(){
alert($("a", this).text());
// if (OpenArea == false) {
// console.log(OpenArea);
// $(this).css( "transform", "scale(0.85)" );
// }
});
}
В консоли OpenArea - true. Но код, выше, выполняется. |
Цитата:
|
Всё.
$(".tags li").on("click", function(){
if (OpenArea === false) {
alert($("a", this).text());
// if (OpenArea == false) {
// console.log(OpenArea);
// $(this).css( "transform", "scale(0.85)" );
// }
}
});
Работает. Спасибо за совет с ===. |
cadijob,
лучше бы не колдовали, а обьяснили алгоритм, того что хотите сделать. |
Цитата:
Сейчас постараюсь объяснить. Вы же макет видели? Так вот, когда форма открывается то по тегам нельзя перейти(то есть не редеректит на другую страницу во время клика) и в дальнейшем ajax будет эти теги в массив собирать по кликам(когда форма открыта, опять же). А вот когда форма закрыта то можно и перейти по ссылке в теге, и "в дальнейшем ajax будет эти теги в массив собирать по кликам" не будет работать. P.S. Заноситься в массив будет id тега, который в свою очередь берётся из БД. |
Цитата:
|
Цитата:
|
cadijob,
что не так?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<link href="https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$("#open-close").show();
$("#block-links").hide();
$("#open-close").click(function(a) {
a.preventDefault();
$("#block-links").slideToggle(400)
});
$(".canDisable").on("click", function(a) {
if ($("#block-links").is(":visible")) a.preventDefault();
})
});
</script>
</head>
<body>
<div class="wrapper" id="scroll">
<div class="container">
<div class="botHeader">
<a href="#" id="open-close">
<div class="talkBtn">
<p>Кнопка которая октрывает форму</p>
</div>
</a>
</div>
<div class="borderShadow"></div>
<div class="talk" id="block-links">
<form action="">
<input type="text" name="textTitle" placeholder="Тема сообщения">
<textarea name="textarea" rows="8" cols="80" placeholder="Текст"></textarea>
</form>
</div>
<div class="tags">
<ul>
<li><a href="" class="canDisable">Тег 1</a></li>
<li><a href="" class="canDisable">Тег 2</a></li>
<li><a href="" class="canDisable">Тег 3</a></li>
<li><a href="" class="canDisable">Тег 4</a></li>
<li><a href="" class="canDisable">Тег 4</a></li>
<li><a href="" class="canDisable">Тег 5</a></li>
<li><a href="" class="canDisable">Тег 6</a></li>
<li><a href="" class="canDisable">Тег 7</a></li>
<li><a href="" class="canDisable">Тег 8</a></li>
<li><a href="" class="canDisable">Тег 9</a></li>
<li><a href="" class="canDisable">Тег 10</a></li>
<li><a href="" class="canDisable">Тег 11</a></li>
<li><a href="" class="canDisable">Тег 12</a></li>
</ul>
</div>
<div class="borderShadow"></div>
<div class="posts">
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 03:25. |