Question

以下是jQuery ui可选插件的代码。该代码允许我使用没有套索和没有键盘的鼠标选择多个可选对象。我选择时，console.log消息确实出现在firebug中。当我选择了多个可选项并取消选择其中一些时，它也会出现。

问题是，当只选择了一个元素并且我取消选择它时，没有任何反应。在这种情况下我还需要console.log消息。

任何帮助表示赞赏

<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script type="text/javascript">
    $(function() {
        $("#selectable").bind("mousedown", function(e) {
            e.metaKey = true;
        }).selectable({
            stop: function() {
                var result = $( "#select-result" ).empty();
                $( ".ui-selected", this ).each(function() {
                    var index = $( "#selectable li" ).index( this );
                    result.append( " #" + ( index + 1 ) );

                                    console.log("test")
                            });
            }
        });
    });
</script>

<p id="feedback">
    <span>You've selected:</span> <span id="select-result">none</span>.
</p>

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
</ol>

Answer 1

您的问题是您的console.log函数仅针对每个所选项启动，因为选择器有＆＃34; .ui-selected＆＃34;。当你取消选择最后一个时，没有任何选择，所以该功能根本没有。

您可以为每个未选择的项绑定另一个函数，如下所示：

$(function() {
    $("#selectable").bind("mousedown", function(e) {
        e.metaKey = true;
    }).selectable({
        stop: function() {
            var result = $( "#select-result" ).empty();

            $( ".ui-selected", this ).each(function() {
                var index = $( "#selectable li" ).index( this );
                result.append( " #" + ( index + 1 ) );
                 console.log("selected");
            });

            $( ".ui-selectee", this ).each(function() {
                var index = $( "#selectable li" ).index( this );
                result.append( " #" + ( index + 1 ) );
                console.log("not selected");
            });
        }
    });
});

您可以通过为刚刚选择或未选中的每个项目触发一个函数来使其更具动态性。为此，您可以使用可选择的选定和未选定事件。这会在您刚刚选择或未选择的每个项目停止和触发的同时触发，具体取决于您使用的是哪一个。例如：

$(function() {
    $("#selectable").bind("mousedown", function(e) {
        e.metaKey = true;
    }).selectable({
        stop: function() {
            // fires at stop
            var result = $( "#select-result" ).empty();
        },
        selected: function(event, obj) {
            // this function will fire for each item that was just selected
            // obj is the selected object
            console.log("selected");
            console.log(obj);

            // Not sure if this bit will work, could try this instead of obj
            var index = $( "#selectable li" ).index(obj);
            $('#result').append( " #" + ( index + 1 ) );

        },
        unselected: function(event, obj) {
            // this function will fire for each item that was just deselected
            // obj is the unselected object

            console.log("deselected");
            console.log(obj);

            // Not sure if this bit will work
            var index = $( "#selectable li" ).index(obj);
            $('#result #" + ( index + 1 )').remove();
        }
    });
});

jQuery ui selectable：当只有一个元素被选中时，函数不会对取消选择作出反应

1 个答案: