Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.12.2013, 17:09
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Управление checkbox: упростить код (побороть говнокод)
Подскажите, как это упростить без jQuery?
Не получается загнать в цикл Или тут нужно баловаться с замыканиями?

function Id(a){ return document.getElementById(a); }

window.addEventListener('click', function(){ 

    var p1 = Id('p1').checked,  // Появляются динамически
        p2 = Id('p2').checked,  //  после выполнения функции 
        p3 = Id('p3').checked,  //  Polygon (см. ниже)
        p4 = Id('p4').checked;

    Id('p1').addEventListener('click', function(){ 
        if (!this.checked){ Polygon(0,p2,p3,p4); }
        else              { Polygon(1,p2,p3,p4); Id('p1').checked = true; }
        Id('p2').checked = p2;
        Id('p3').checked = p3;
        Id('p4').checked = p4;
    }, false);
    
    Id('p2').addEventListener('click', function(){ 
        if (!this.checked){ Polygon(p1,0,p3,p4); }
        else              { Polygon(p1,1,p3,p4); Id('p2').checked = true; }
        Id('p1').checked = p1;
        Id('p3').checked = p3;
        Id('p4').checked = p4;
    }, false);
        
    Id('p3').addEventListener('click', function(){ 
        if (this.checked){ Polygon(p1,p2,1,p4); Id('p3').checked = true; }
        else             { Polygon(p1,p2,0,p4); }
        Id('p1').checked = p1;
        Id('p2').checked = p2;
        Id('p4').checked = p4;
    }, false);

    Id('p4').addEventListener('click', function(){ 
        if (this.checked){ Polygon(p1,p2,p3,1); Id('p4').checked = true; }
        else             { Polygon(p1,p2,p3,0); }
        Id('p1').checked = p1;
        Id('p2').checked = p2;
        Id('p3').checked = p3;
    }, false);
    
}, false);

Последний раз редактировалось Demath, 19.12.2013 в 17:45. Причина: Опечатка в коде
Ответить с цитированием
  #2 (permalink)  
Старый 19.12.2013, 17:44
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Demath, у тебя внутри обработчика клика (по window) при каждом клике навешивается новая копия обработчика клика по p1-p4. То есть количество обработчиков с каждым кликом увеличивается. Это так задумано?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 19.12.2013, 17:53
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Сообщение от danik.js
Demath, у тебя внутри обработчика клика (по window) при каждом клике навешивается новая копия обработчика клика по p1-p4. То есть количество обработчиков с каждым кликом увеличивается. Это так задумано?
Это так, для примера))
Не разобрался. С load в window внутренние обработчики для p1-p4 не пашут, ввиду, как я понимаю, динамичности p1-p4.
Ответить с цитированием
  #4 (permalink)  
Старый 19.12.2013, 17:58
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Demath
if (!this.checked){ Polygon(0,p2,p3,p4); }
        else              { Polygon(1,p2,p3,p4); Id('p1').checked = true; }
else выполнится когда чекбокс отмечен. Зачем его отмечать повторно, когда известно что он уже отмечен?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 19.12.2013, 18:05
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

window.addEventListener('click', function(){

    var checkboxes = new Array(4);
    var states = new Array(4);
    var onclick = function() {
        var args = new Array(4);
        for (var i = 0; i < checkboxes.length; i++) {
            var checkbox = checkboxes[i];
            if (this === checkbox) {
                args[i] = Number(this.checked);
            } else {
                args[i] = states[i];
                checkbox.checked = states[i];
            }
        }
        Polygon.apply(window, args);
    };

    for (var i = 0; i < checkboxes.length; i++) {
        var checkbox = document.getElementById('p' + (i + 1));
        checkbox.addEventListener('click', onclick, false);
        checkboxes[i] = checkbox;
        states[i] = checkbox.checked;
    }

}, false);
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #6 (permalink)  
Старый 19.12.2013, 18:19
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Сообщение от danik.js Посмотреть сообщение
Сообщение от Demath
if (!this.checked){ Polygon(0,p2,p3,p4); }
else { Polygon(1,p2,p3,p4); Id('p1').checked = true; }
else выполнится когда чекбокс отмечен. Зачем его отмечать повторно, когда известно что он уже отмечен?
Чтобы сохранить метку. Без этого чекбокс при клике по нему не помечается(
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
упростить, но и усложнить код Александр х@к Элементы интерфейса 7 24.08.2011 21:36
Подскажите плизз как можно упростить код frolvict Общие вопросы Javascript 19 08.04.2010 14:23