0

我有这个工作但是我不能让它在我现有的代码中工作。

我需要发生的是：http: //jsfiddle.net/uJcB7/176/

因此，当我将复选框中的功能添加到 div 中时，它会将它们放在一个列表中。我让每个功能都可以工作，但不知道如何将两者结合起来。

因此，当您将复选框中的功能添加到 div 中时，它会将功能字符串添加为列表，我可以拖动它。

干杯

4

1 回答 1

2

我想最简单的回答方法是演示？

jsFiddle 演示

希望这就是你所追求的，我会为你分解代码。

首先，我合并了您的文档就绪函数调用，并在适当的时候折叠了所有使用相同选择器的 jQuery 语句。这导致了初始化代码，即：

$(function() {

    $("#sortable").sortable().disableSelection();
    $('#cblistp input').click(additionalFeatures);

    additionalFeatures();
});

allVals然后我把原来的数组折叠起来，换成jQuery的map函数。map函数本质上就是函数each，结果的额外好处是返回的任何元素的数组。在map函数中，我们只是一一返回.value所有选定的 HTML 输入。然后我join用一个稍微好一点的,加入他们。这给了我们：

// add additional features
function additionalFeatures() {   
    // map the selected items
    var text = $.map($('#cblistp :checked'), function(input) {
        return input.value;
    }).join(', ');

    $('#additionalFitFeatures').text(text);
};

除此之外，如前所述，map函数的作用类似于each函数。这允许我们在选择要显示在div. 首先我们需要清除旧的 sortable，然后我们将添加选定的项目，最后我们将构造一个新的 sortable。这给了我们以下信息：

// add additional features
function additionalFeatures() {
    // clear out the old sortable
    var sortableList = $('#sortable').sortable('destroy').find('li').remove().end();

    // map the selected items
    var text = $.map($('#cblistp :checked'), function(input) {
        sortableList.append('<li>' + input.value + '</li>');            
        return input.value;
    }).join(', ');

    $('#additionalFitFeatures').text(text);
    sortableList.sortable();
};
于 2012-08-16T10:33:09.250 回答