Форум

Tecvid · #1 (**permalink**) 01.12.2014, 20:43

добрый вечер, скажите пожалуйтса можно ли как-то оптимизировать этот код? что-то мне не очень нравится что я каждый раз обращаюсь к одному и тому же элементу (пускай даже через переменную и через this), лучше будет если одним разом изменить все необходимые стили? такое вообще возможно в js?)

var email = document.getElementById('email');
    email.onkeypress = function() {
        this.style.borderColor = '#9DE2EE';
        this.style.color = '#434343';
        this.style.backgroundImage = 'none';
    };
    email.onfocus = function() {
        if (this.value == 'E-mail') {
            this.value = '';
            this.style.color = '#434343'; 
        }
    };
    email.onblur = function() {
        if (this.value == '') {
            this.value = 'E-mail';
            this.style.color = '#BBB';
            this.style.borderColor = '#9DE2EE';
            this.style.backgroundImage = 'none'; 
        }
        else if (this.value != '' || this.value != 'E-mail') {
            if (/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(this.value)) {
                $.ajax({
                    type: 'GET',
                    url: '/reg/check/?v=email&val=' + this.value,
    				cache: false,
    				success: function(data) {
    				    if (data > 0) {
    				        email.style.borderColor = '#F29793';
                            email.style.color = '#F2645C';
                            email.style.background = 'url(/assets/img/denied.gif) 172px 10px no-repeat';
    				    } else {
    				        email.style.borderColor = '#89CFB0';
                            email.style.color = '#50BA88';
                            email.style.background = 'url(/assets/img/accepted.gif) 171px 10px no-repeat';
    				    }
    				}
                });
            } else {
                email.style.borderColor = '#F29793';
                email.style.color = '#F2645C';
                email.style.background = 'url(/assets/img/denied.gif) 172px 10px no-repeat';
            }
        }
    };

danik.js · #2 (**permalink**) 01.12.2014, 20:49

А css-классы наверно для дураков придумали, да?

Tecvid · #3 (**permalink**) 01.12.2014, 20:52

Сообщение от danik.js

А css-классы наверно для дураков придумали, да?

с классам не получится, слишком много чего нужно сделать програмно, а с этим цсс не справляется, это всего лишь кусок кода

Tecvid · #4 (**permalink**) 01.12.2014, 20:54

так или вы имеете ввиду чтоб программно изменить класс, у которого другие стили?

krutoy · #5 (**permalink**) 01.12.2014, 21:02

Был вариант с with, но его выпилили. Можно как то так:

<html>
<head></head>

<div>div</div>
 
<body>
<script>

div=document.querySelector("div")

//старый вариант:
//with(div.style){
//  background="red"
//  border="2px solid black"
//}

f=function(o){
   for(var i in o){this.style[i]=o[i]}
}

f.call(div, {background: "red", border: "5px solid black"})



</script>
</body>
</html>

Но это к оптимизации не относится, это что-то типа рефакторинга, наверное.

danik.js · #6 (**permalink**) 01.12.2014, 21:07

Ебать ты отсталый. Ты проспал плейсхолдеры, проспал html5 валидацию. Все блядь проспал.

<style>
input{
    border: 1px solid #9DE2EE;
}
input:focus{
    color: #434343;
}
input.invalid{
    border-color: #F29793;
    color: #F2645C;
}
::-webkit-input-placeholder{
    color: #BBB;
}
:-moz-placeholder{
    color: #BBB;
    opacity: 1;
}
::-moz-placeholder{
    color: #BBB;
    opacity: 1;
}
:-ms-input-placeholder{
    color: #BBB;
}
</style>
<form>
    <input type="email" name="email" id="email" placeholder="E-mail" pattern="[\w-\.]+@([\w-]+\.)+[\w-]{2,4}" required="" />
</form>
<script>
var email = document.getElementById('email');
email.form.noValidate = true; // отключаем html5 валидацию
email.onblur = function() {
    if (!this.value) {
        email.className = email.className.replace(/\s*invalid/, '');
        return;
    }
    var pattern = new RegExp('^' + this.getAttribute('pattern') + '$');
    if (!pattern.test(this.value)) {
        email.className += ' invalid';
        return;
    }
    /*$.ajax({
        type: 'GET',
        url: '/reg/check/?v=email&val=' + this.value,
        cache: false,
        success: function(data) {
            if (data > 0) {
                email.className += ' invalid';
            } else {
                email.className = email.className.replace(/\s*invalid/, '');
            }
        }
    });*/
};
</script>

Tecvid · #7 (**permalink**) 01.12.2014, 21:08

вообщем получается что через js другого элегантного варианта нет) понятно, спасибо большое

danik.js · #8 (**permalink**) 01.12.2014, 21:09

Стоп. А че за хуйня? jQuery же подключил себе? Дык вешай обработчики по-людски, а не через допотопный .onblabla. Ну и классы как бы тоже через jQuery проще щелкать.

danik.js · #9 (**permalink**) 01.12.2014, 21:10

Сообщение от Tecvid

вообщем получается что через js другого элегантного варианта нет)

Какой нахуй элегантный вариант? Ты понимаешь вообще че просишь?
Это как если бы тракторист просил себе элегантный трактор.

Tecvid · #10 (**permalink**) 01.12.2014, 21:10

Сообщение от danik.js

Ебать ты отсталый. Ты проспал плейсхолдеры, проспал html5 валидацию. Все блядь проспал.

так, давай без мата, не хочешь помогать? ну и не надо, найдутся добрые люди, ничего я не проспал, в курсе я, но html4 пока что не вымер

Форум

Справочник

Discord чат

Курсы javascript