Select 元素 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

Answer 2

面向未来观众的普通 javascript 解决方案。不需要 jQuery。这实际上是与接受的答案相同的脚本，没有 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);
            }
        };
    }
})();

Select 元素 jQuery 不使用 ID

Select element with jQuery without using ID

javascript

jquery

toggle