Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Управление checkbox: упростить код (побороть говнокод) (https://javascript.ru/forum/misc/43760-upravlenie-checkbox-uprostit-kod-poborot-govnokod.html)

Demath 19.12.2013 17:09

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

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

danik.js 19.12.2013 17:44

Demath, у тебя внутри обработчика клика (по window) при каждом клике навешивается новая копия обработчика клика по p1-p4. То есть количество обработчиков с каждым кликом увеличивается. Это так задумано?

Demath 19.12.2013 17:53

Цитата:

Сообщение от danik.js
Demath, у тебя внутри обработчика клика (по window) при каждом клике навешивается новая копия обработчика клика по p1-p4. То есть количество обработчиков с каждым кликом увеличивается. Это так задумано?

Это так, для примера))
Не разобрался. С load в window внутренние обработчики для p1-p4 не пашут, ввиду, как я понимаю, динамичности p1-p4.

danik.js 19.12.2013 17:58

Цитата:

Сообщение от Demath
if (!this.checked){ Polygon(0,p2,p3,p4); }
        else              { Polygon(1,p2,p3,p4); Id('p1').checked = true; }

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

danik.js 19.12.2013 18:05

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

Demath 19.12.2013 18:19

Цитата:

Сообщение от danik.js (Сообщение 287841)
Цитата:

Сообщение от Demath
if (!this.checked){ Polygon(0,p2,p3,p4); }
else { Polygon(1,p2,p3,p4); Id('p1').checked = true; }

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

Чтобы сохранить метку. Без этого чекбокс при клике по нему не помечается(


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