JavaScript: contare il numero di elementi selezionati senza jQuery

Come facevano i nostri antenati a contare il numero di elementi selezionati quando non esisteva jQuery? Ecco un breve viaggio a ritroso nel tempo che vi mostrerà una semplice implementazione di questa tecnica in JavaScript.

Abbiamo una semplice lista con un contatore:


<ul id="test">
    <li></li>
    <li></li>
    <li></li>
 	<li></li>
    <li></li>
    <li></li>
 	<li></li>
    <li></li>
    <li></li>
	<li></li>
</ul>

<p>Number of selected objects: <span id="select-count">0</span></h1>
​

Con JavaScript dobbiamo semplicemente equalizzare gli eventi del mouse tra le voci della lista:


var selectNum = 0;

function select(obj, elements) {

    elements = document.getElementsByTagName(elements);

    if (obj.className == "selected") {
        obj.className = "";
        selectNum--;
    }
    else {
        obj.className = "selected";
        selectNum++;
    }
    document.getElementById("select-count").innerHTML = selectNum;

    for (i = 0; i < 10; i++) {
        elements[i].onmouseover = elements[i].onmousedown; // equalizzazione degli eventi (DOM Level 0)
    }

    obj.onmouseup = function() {
        for (i = 0; i < 10; i++) {
            elements[i].onmousedown = elements[i].onmouseover;
            elements[i].onmouseover = null;
        }
    }

}

Esempio d'uso:


var li = document.getElementsByTagName('li'),
    len = li.length,
    i;

for (var i = 0; i < len; i++) {

    var item = li[i];

    item.onmousedown = function() {
        select(this, 'li');
    };

}

Potete visionare l'esempio finale in questa pagina.

Torna su