4

我知道对于有 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，最后将背景颜色更改回来。

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

4

5 回答 5

2

我首先<ul></ul>在右侧 div 中添加一个空白，然后使用：

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

jsFiddle 示例

于 2013-09-18T20:18:35.140 回答
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/

于 2013-09-18T20:19:29.100 回答
0

你可以试试这个

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

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

演示。

于 2013-09-18T20:18:49.347 回答
0

使用纯 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/

于 2013-09-18T20:21:24.153 回答
0

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'));
});
于 2013-09-18T20:27:24.617 回答