НЕ сколько условий if в одном скрипте
не могу заставить работать два условия
$(window).load(function (invoker) {
document.getElementById('quasactiv').style.display = 'none';
document.getElementById('wexactiv').style.display = 'none';
document.getElementById('exortactiv').style.display = 'none';
document.onkeydown = function(qwerDown) {
if (81 === qwerDown.keyCode) {
document.getElementById('quas').style.width = '125px';
document.getElementById('quas').style.height = '125px';
}
else if (87 === qwerDown.keyCode) {
document.getElementById('wex').style.width = '125px';
document.getElementById('wex').style.height = '125px';
}
else if (69 === qwerDown.keyCode) {
document.getElementById('exort').style.width = '125px';
document.getElementById('exort').style.height = '125px';
}
else if(82 === qwerDown.keyCode) {
document.getElementById('invoke').style.width = '125px';
document.getElementById('invoke').style.height = '125px';
}
else {
};
};
document.onkeyUp = function(qwerUp) {
if (81 === qwerUp.keyCode) {
document.getElementById('quas').style.width = '128px';
document.getElementById('quas').style.height = '128px';
}
else if (87 === qwerUp.keyCode) {
document.getElementById('wex').style.width = '128px';
document.getElementById('wex').style.height = '128px';
}
else if (69 === qwerUp.keyCode) {
document.getElementById('exort').style.width = '128px';
document.getElementById('exort').style.height = '128px';
}
else if(82 === qwerUp.keyCode) {
document.getElementById('invoke').style.width = '128px';
document.getElementById('invoke').style.height = '128px';
}
}
});
|
Работает только первый if
|
ПРоблему решил ошибка была синтаксическая
document.onkeyUp = function(qwerUp) а нужно было document.onkeyup = function(qwerUp) |
Адская смесь jQuery и ванильного js. Вместо стольких if можно switch использовать.
|
Sigizmund2012,
покажеш |
Цитата:
$(document).keyup(function(e){
switch(e.keyCode){
case 81: $('#quas').css({
width: '128px',
height: '128px'
});
break;
case 87: $('#wex').css({
width: '128px',
height: '128px'
});
break;
case 69: $('#exort').css({
width: '128px',
height: '128px'
});
break;
case 82: $('#invoke').css({
width: '128px',
height: '128px'
});
break;
}
});
|
Sigizmund2012, и что это? Код выглядеть лучше не стал. :)
$(document).on('keydown keyup', function(e) {
var ids = {69: 'exort', 81: 'quas', 82: 'invoke', 87: 'wex'};
if(e.keyCode in ids) {
var value = (128 - 3 * e.type == 'keydown') + 'px';
$('#' + ids[e.keyCode]).css({height: value, width: value});
}
});
|
Цитата:
var value = (128 - 3 * e.type == 'keydown') + 'px'; Интуитивно я понимаю, что она делает, но не могли бы вы по шагам объяснить, что именно? И выше в if неявно вызывается for in? |
Sigizmund2012,
и между прочи он у него не работает |
Цитата:
Если событие keydown, то нам нужно подставить 125, а если keyup - то 128, верно? Вот и подставляем значение: e.type == 'keydown' -> тут у нас вернёт либо true, либо false, в зависимости от типа события. 3 * e.type == 'keydown' -> в данном случае, наше булево значение будет восприниматься как число, либо 3 * 1, либо 3 * 0, следовательно: var value = (128 - 3 * e.type == 'keydown') + 'px' -> тут у нас получится либо 125px, либо 128px (всё зависит от типа произошедшего события). Теперь про объект и ключи: var ids = {69: 'exort', 81: 'quas', 82: 'invoke', 87: 'wex'}; -> это у нас объект с ключами, ключ должен возвращать e.keyCode. Оператор in - это не обязательно for..in, этот оператор проверяет существования ключа у объекта/массива. К примеру:
var obj = {a: 'foo'};
alert('a' in obj) //true
alert('b' in obj) //false
Ну вот и всё, если e.keyCode есть в объекте, то подставляем значение объекта с ключём e.keyCode: $('#' + ids[e.keyCode]) Надеюсь, что понятно объяснил. |
Ruslan_xDD
Теперь усё понятно, спасибо, жаль что этот код не работает. Пишем в консоль: var value = (128 - 3 * false) + 'px' получаем "128px", всё пучком, но: var value2 = (128 - 3 * true == true) + 'px' получаем "falsepx". Это происходит потому, что сначала вычисляются правая и левая части неравенства, в итоге 125 == true возвращает false. В вашем же коде 128-3*e.keyCode == "keydown" тоже вернёт false. Свойства объекта всё-таки нужно как-то перебрать и для этого тоже используется for in, просто он неявно вызывается. |
Sigizmund2012, верно, тогда можно обернуть условие в скобки:
$(document).on('keydown keyup', function(e) {
var ids = {69: 'exort', 81: 'quas', 82: 'invoke', 87: 'wex'};
if(e.keyCode in ids) {
var value = (128 - 3 * (e.type == 'keydown')) + 'px';
$('#' + ids[e.keyCode]).css({height: value, width: value});
}
});
Цитата:
var ids = {69: 'exort', 81: 'quas', 82: 'invoke', 87: 'wex'}, keyCode;
keyCode = 69;
alert(ids[keyCode]);
keyCode = 81;
alert(ids[keyCode]);
Может так понятнее? :) |
Ruslan_xDD,
т.е. выражение (e.keyCode in ids) это просто ещё один способ прямого обращения к значению свойства объекта? Я думал это возможно только через точку и квадратные скобки :-? |
Sigizmund2012, почти. Это проверка на существования свойства в объекте/массиве.
var obj = {foo: 'bar'};
alert('foo' in obj); //true, так как свойство 'foo' есть у объекта
alert('bla' in obj); //false, потому что нет такого свойства у объекта.
Ты можешь писать условия так:
if(obj.foo) {
...
}
else {
...
}
Но этот способ возвращает нам сразу всё значение obj.foo и потом уже преобразуется в булево. А вот способ ниже сразу возвращает true/false, а значит и работает быстрее, и более правилен. :)
if('foo' in obj) {
...
}
else {
...
}
И на заметку: https://msdn.microsoft.com/ru-ru/lib...(v=vs.94).aspx |
| Часовой пояс GMT +3, время: 23:56. |