Эффектами на пять кнопок, которые могут быть включены или отключены


function prepareEventHandlers() {
    var sectionButton1 = document.getElementById("sectionButton1");
    var sectionButton2 = document.getElementById("sectionButton2");
    var sectionButton3 = document.getElementById("sectionButton3");
    var sectionButton4 = document.getElementById("sectionButton4");
    var sectionButton5 = document.getElementById("sectionButton5");

    var enabled1 = true;
    var enabled2 = false;
    var enabled3 = false;
    var enabled4 = false;
    var enabled5 = false;


    function checkEnabled() {
        if (enabled1) {
            sectionButton1.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled2) {
            sectionButton2.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled3) {
            sectionButton3.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled4) {
            sectionButton4.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled5) {
            sectionButton5.setAttribute("class", "sectionButtonEnabled");
        }

    }

    checkEnabled();
    sectionButton1.onmouseover = function() {
        if (enabled1) {
            sectionButton1.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton1.onmouseout = function() {
        if (enabled1) {
            sectionButton1.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton2.onmouseover = function() {
        if (enabled2) {
            sectionButton2.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton2.onmouseout = function() {
        if (enabled2) {
            sectionButton2.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton3.onmouseover = function() {
        if (enabled3) {
            sectionButton3.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton3.onmouseout = function() {
        if (enabled3) {
            sectionButton3.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton4.onmouseover = function() {
        if (enabled4) {
            sectionButton4.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton4.onmouseout = function() {
        if (enabled4) {
            sectionButton4.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton5.onmouseover = function() {
        if (enabled5) {
            sectionButton5.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton5.onmouseout = function() {
        if (enabled5) {
            sectionButton5.setAttribute("class", "sectionButtonEnabled");
        }
    };
}


window.onload = function() {
    prepareEventHandlers();
};


277
5
задан 2 декабря 2011 в 11:12 Источник Поделиться
Комментарии
3 ответа

Ну во-первых вы должны думать о рефакторинге кода. Следующие

if (enabled1) {
sectionButton1.setAttribute("class", "sectionButtonEnabled");
}

повторяется несколько раз, только 2 различия. Флаг включен, а кнопка. Так что это может легко перейти в новую функцию

function SetClassIfEnabled(enabled, btn) {
if (enabled) {
btn.setAttribute("class", "sectionButtonEnabled");
}
}

Следующий повторяет:

sectionButton1.onmouseover = function() {
if (enabled1) {
sectionButton1.setAttribute("class", "sectionButtonOver");
}
};
sectionButton1.onmouseout = function() {
if (enabled1) {
sectionButton1.setAttribute("class", "sectionButtonEnabled");
}
};

так что это может легко перейти в другую функцию. Но я бы не изменить одну вещь. Вы добавляете события мыши к каждой кнопке, но они только что-то делать, если они включены. Так что я бы проверить это, а потом добавлять события мыши.

function AddHoverIfEnabled(enabled, btn) {
if (enabled) {
btn.onmouseover = function () {
btn.setAttribute("class", "sectionButtonOver");
};
btn.onmouseout = function () {
btn.setAttribute("class", "sectionButtonEnabled");
};
}
}

Делает выше будет сократить ваш код немного, потому что потом вы можете вызывать функции, как это

SetClassIfEnabled(enabled1, sectionButton1);
SetClassIfEnabled(enabled2, sectionButton2);
...
AddHoverIfEnabled(enabled1, sectionButton1);
AddHoverIfEnabled(enabled2, sectionButton2);
...

Но я взял его на шаг дальше. Поставив кнопки и флаги, включена в массив, вы можете просто выполнить итерации по каждой и сделать работу при необходимости. Это позволит сделать его очень легко, чтобы добавить еще одну кнопку в будущем. Следующий код может заменить все вышеперечисленные изменения.

function prepareEventHandlers() {

var btnArray = [];
btnArray[0] = [document.getElementById("sectionButton1"), true];
btnArray[1] = [document.getElementById("sectionButton2"), false];
btnArray[2] = [document.getElementById("sectionButton3"), false];
btnArray[3] = [document.getElementById("sectionButton4"), false];
btnArray[4] = [document.getElementById("sectionButton5"), false];

for (i = 0; i < btnArray.length; i++) {
if (btnArray[i][1] == true) { // section/button is enabled

var btn = btnArray[i][0];
btn.setAttribute("class", "sectionButtonEnabled"); // set default class

// Add Hover Events
btn.onmouseover = function () {
this.setAttribute("class", "sectionButtonOver");
};
btn.onmouseout = function () {
this.setAttribute("class", "sectionButtonEnabled");
};
}
}
}

Я бы на самом деле взять время из этой функции и передать его в качестве аргумента, но вы получите точку.

Я также предполагая, что флаги включить может измениться на любую из кнопок. Если нет и это только один (как вы показываете) вы могли бы просто ликвидировать весь код, который не имеет ничего общего с наименованием "button1", потому что никто из окружающих не включен, так что они не используют вообще.

7
ответ дан 3 декабря 2011 в 01:12 Источник Поделиться

Вы не должны использовать метод setAttribute и "класс" - в JavaScript свойство класса. Более того, это может быть снижена до петли, потому что все пять элементов имеют точно такую же общую процедуру. Вот что я хотел бы переписать это как:

// The "enabled" states of each item:
var enabled = [true, false, false, false, false];

// Set up a function to prepare a section button:
function prepareSectionButton(i) {
// Fetch the section button:
var sectionButton = document.getElementById('sectionButton' + i);

// Assign event handlers:
sectionButton.onmouseover = function() {
// Only change if enabled:
if(enabled[i]) {
sectionButton.className = 'sectionButtonOver';
}
};
sectionButton.onmouseout = function() {
// Only change if enabled:
if(enabled[i]) {
sectionButton.className = 'sectionButtonEnabled';
}
};

// Check if this one is enabled:
if(enabled[i]) {
this.className = 'sectionButtonEnabled';
}
}

// Finally, prepare our five section buttons:
for(var i = 1; i <= 5; i++) {
prepareSectionButton(i);
}

3
ответ дан 3 декабря 2011 в 05:12 Источник Поделиться

и, возможно, также могли бы сделать обертку:
функция $(идентификатор){возвращение документа.метода getElementById(идентификатор);}

1
ответ дан 3 декабря 2011 в 08:12 Источник Поделиться