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

Question

所以我有一个数组中的元素列表。我想向每个元素添加一个 jQuery 切换事件，并传入两个函数作为参数。这就是我到目前为止所得到的，尽管它给了我错误，说 e(事件对象)在 moveToSelected 和 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，根据要求:

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

感谢您的帮助!

Answer 1

嗯，你为什么不使用 jQuery，它已经内置了？

$('.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