Question

我知道对于有javascript经验的人来说这将是一件容易的事情，但我正在画一个空白。

我有一个项目列表：

<div id="left-side">
    <ul>
        <li><div>Item 1</div></li>
        <li><div>Item 2</div></li>
    </ul>
</div>

<input id="addElement" type="button" value="->"/>

<div id="right-side">
</div>

我想突出显示（更改背景颜色）左侧所选列表项，然后单击按钮，将所选项目移动到右侧div，最后更改背景颜色。

我在网上看过很多次。但不能为我的生活，想出怎么做。

Answer 1

首先向你的右侧div添加一个空的<ul></ul>，然后使用它：

$('#left-side li').click(function () {
    $(this).toggleClass('selected');
});
$('#addElement').click(function () {
    $('#left-side li.selected').appendTo($('#right-side ul'));
});

<强> jsFiddle example

Answer 2

这样的东西（jquery）应该可以做到这一点：

// make the items selectable by toogling an 'active' class
$('#left-side li').click(function() {
     $(this).toggleClass('active');   
});

// on click of the move button
$('#addElement').click(function() {
    // get the items to move
    var $items =  $('#left-side li.active');
    // remove their active state
    $items.removeClass('active');
    // append them to the right side list
    $('#right-side ul').append($items);
});

正如您所看到的，代码确实非常直接。

我还设置了一个小例子来展示：http://jsfiddle.net/NbcS9/

修改
如果你只想在左边选择一个项目，你可以做这样的事情：

// make the items selectable by toogling an 'active' class $('#left-side li').click(function () { // remove active class from all other items $('#left-side li').not($(this)).removeClass('active'); // toggle the active class on the clicked item $(this).toggleClass('active'); });

更新的小提琴： http://jsfiddle.net/NbcS9/1/

Answer 3

你可以试试这个

$(function(){
    $('#left-side ul li').on('click', function(){
        $(this).toggleClass('selected');
    });

    $('#addElement').on('click', function(){
        $('#left-side ul li.selected').appendTo($('#right-side ul'));
    });
});

DEMO.

Answer 4

使用纯JavaScript会很难做到这一点，但使用JQuery可以很容易地做到这一点。将单击事件添加到两个div，它们将另一个的选定文本附加到自身。获取所选数据添加如下函数：

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

另外，我会研究Jquery Draggable（）。听起来像是与你想要的最终结果有关的东西。 http://jqueryui.com/draggable/

Answer 5

的CSS：

  .highlighted { background: yellow; }

HTML：

<div id="left-side">
    <ul>
        <li><div>Item 1</div></li>
        <li><div>Item 2</div></li>
    </ul>
</div>

<input id="addElement" type="button" value="->"/>

<div id="right-side">
    <ul></ul>
</div>

JS：

$('#left-side').find('li').on('click', function(event) {

     $(this)
        .siblings().removeClass('highlighted')
        .end()
        .addClass('highlighted');

});


$('#addElement').on('click', function(event) {
    event.preventDefault();
    $('#left-side').find('li.highlighted').appendTo('#right-side ul'));
});

从div1中选择<li>，点击按钮，移至div2 </li>

5 个答案: