Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.12.2014, 20:43
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

Поиск элементов
добрый вечер, скажите пожалуйтса можно ли как-то оптимизировать этот код? что-то мне не очень нравится что я каждый раз обращаюсь к одному и тому же элементу (пускай даже через переменную и через 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';
            }
        }
    };
Ответить с цитированием
  #2 (permalink)  
Старый 01.12.2014, 20:49
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А css-классы наверно для дураков придумали, да?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 01.12.2014, 20:52
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

Сообщение от danik.js
А css-классы наверно для дураков придумали, да?
с классам не получится, слишком много чего нужно сделать програмно, а с этим цсс не справляется, это всего лишь кусок кода
Ответить с цитированием
  #4 (permalink)  
Старый 01.12.2014, 20:54
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

так или вы имеете ввиду чтоб программно изменить класс, у которого другие стили?
Ответить с цитированием
  #5 (permalink)  
Старый 01.12.2014, 21:02
Профессор
Посмотреть профиль Найти все сообщения от krutoy
 
Регистрация: 09.11.2014
Сообщений: 610

Был вариант с 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>

Но это к оптимизации не относится, это что-то типа рефакторинга, наверное.
Ответить с цитированием
  #6 (permalink)  
Старый 01.12.2014, 21:07
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Ебать ты отсталый. Ты проспал плейсхолдеры, проспал 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>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #7 (permalink)  
Старый 01.12.2014, 21:08
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

вообщем получается что через js другого элегантного варианта нет) понятно, спасибо большое
Ответить с цитированием
  #8 (permalink)  
Старый 01.12.2014, 21:09
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Стоп. А че за хуйня? jQuery же подключил себе? Дык вешай обработчики по-людски, а не через допотопный .onblabla. Ну и классы как бы тоже через jQuery проще щелкать.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #9 (permalink)  
Старый 01.12.2014, 21:10
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Tecvid
вообщем получается что через js другого элегантного варианта нет)
Какой нахуй элегантный вариант? Ты понимаешь вообще че просишь?
Это как если бы тракторист просил себе элегантный трактор.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #10 (permalink)  
Старый 01.12.2014, 21:10
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

Сообщение от danik.js
Ебать ты отсталый. Ты проспал плейсхолдеры, проспал html5 валидацию. Все блядь проспал.
так, давай без мата, не хочешь помогать? ну и не надо, найдутся добрые люди, ничего я не проспал, в курсе я, но html4 пока что не вымер
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск элементов по DOM и записать их в массив sonntagausgang Events/DOM/Window 2 03.10.2013 01:02
Поиск элементов по тэгу - getElementsByTagName('table') lamer Общие вопросы Javascript 8 31.01.2013 04:58
Поиск элементов на другой странице chudikos Events/DOM/Window 4 10.11.2012 09:12
поиск элементов в DOM Bebarr Swallow Общие вопросы Javascript 1 24.06.2011 14:57
Поиск элементов в контексте korzhik Events/DOM/Window 6 31.12.2008 11:35