使用jQuery选择元素而不使用ID

Question

So I have a list of elements in an array. I'd like to add a jQuery toggle event to each element and pass in two functions as parameters. This is what I have so far, though it's giving me errors, saying that e (the Event Object) is undefined inside moveToSelected and moveToUnselected.

// Getting my array
var selected = document.getElementsByClassName("selected_style");

// The two functions to toggle between:

function moveToSelected(e) {
    style = e.target;
    style.className = "selected_style";
    $('#selected-style').append(e.target);
}

function moveToUnselected(e) {
    style = e.target
    style.className = "unselected_style";
    $('#unselected-style').append(e.target);
}

// Going through the array and adding a toggle event to each element.
for(var i = 0; i < selected.length; i++) {
    var element = $(unselected[i]);
    element.toggle(moveToSelected, moveToUnselected);
}

HTML, as requested:

<ul id="selected-style">
    <li>
      Some Style
    </li>
    <li class="selected_style">
      Style
    </li>
    <li class="selected_style">
      Style
    </li>
    <li class="selected_style">
      Style
    </li>
</ul>

Thanks for the help!

Answer 1

Uhm, why aren't you using jQuery, this is already built in ?

$('.selected_style').on('click', function() {
    $(this).toggleClass('selected_style unselected_style');

    if ( $(this).hasClass('selected_style') ) {
        $('#selected-style').append(this);
    } else {
        $('#unselected-style').append(this);
    }
});

FIDDLE

Answer 2

The vanilla javascript solution for future viewers. No jQuery required. This is effectively the same script as the accepted answer, without all the overhead of jQuery.

( Demo )

(function () {
    "use strict";
    var selected = document.getElementById('selected-style');
    var unselected = document.getElementById('unselected-style');
    var items = document.querySelectorAll('.selected_style'), item;
    for (var i = 0; item = items[i]; i++) {
        item.onclick = function(){
            if(this.className.indexOf('unselected_style') >= 0) {
                this.className = this.className.replace(' unselected_style','');
                this.className += ' selected_style';
                selected.appendChild(this);
            } else {
                this.className = this.className.replace(' selected_style','');
                this.className += ' unselected_style';
                unselected.appendChild(this);
            }
        };
    }
})();