Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   НЕ сколько условий if в одном скрипте (https://javascript.ru/forum/dom-window/54236-ne-skolko-uslovijj-if-v-odnom-skripte.html)

ArsenInvoker 10.03.2015 09:31

НЕ сколько условий 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';
}




}



});

ArsenInvoker 10.03.2015 09:32

Работает только первый if

ArsenInvoker 10.03.2015 10:24

ПРоблему решил ошибка была синтаксическая
document.onkeyUp = function(qwerUp)
а нужно было
document.onkeyup = function(qwerUp)

Sigizmund2012 10.03.2015 18:42

Адская смесь jQuery и ванильного js. Вместо стольких if можно switch использовать.

ArsenInvoker 10.03.2015 18:55

Sigizmund2012,
покажеш

Sigizmund2012 10.03.2015 19:23

Цитата:

Сообщение от ArsenInvoker (Сообщение 360530)
Sigizmund2012,
покажеш

Для 2-го куска кода:
$(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;
    }
});

ruslan_mart 10.03.2015 19:54

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

Sigizmund2012 10.03.2015 20:41

Цитата:

Сообщение от Ruslan_xDD (Сообщение 360549)
Sigizmund2012, и что это? Код выглядеть лучше не стал. :)

Он стал более компактным и читаемым(на мой взгляд), а чтобы ваш код понять, нужно пучок травы скурить. Например строка:
var value = (128 - 3 * e.type == 'keydown') + 'px';

Интуитивно я понимаю, что она делает, но не могли бы вы по шагам объяснить, что именно? И выше в if неявно вызывается for in?

ArsenInvoker 10.03.2015 23:50

Sigizmund2012,
и между прочи он у него не работает

ruslan_mart 11.03.2015 08:01

Цитата:

Сообщение от Sigizmund2012
var value = (128 - 3 * e.type == 'keydown') + 'px';

Ну смотри, у нас навешано два события (keyup и keydown), они будут вызывать одну и ту же функцию.
Если событие 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])

Надеюсь, что понятно объяснил.


Часовой пояс GMT +3, время: 13:46.