Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Поиск элементов (https://javascript.ru/forum/events/52046-poisk-ehlementov.html)

Tecvid 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 01.12.2014 20:49

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

Tecvid 01.12.2014 20:52

Цитата:

Сообщение от danik.js
А css-классы наверно для дураков придумали, да?

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

Tecvid 01.12.2014 20:54

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

krutoy 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 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 01.12.2014 21:08

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

danik.js 01.12.2014 21:09

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

danik.js 01.12.2014 21:10

Цитата:

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

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

Tecvid 01.12.2014 21:10

Цитата:

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

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


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