0

以下是 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>
4

1 回答 1

0

您的问题是您的 console.log 函数仅针对每个选定的项目触发，因为那里的选择器是“.ui-selected”。当您取消选择最后一个时，没有任何选择，因此该功能根本不会触发。

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

$(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");
            });
        }
    });
});

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

$(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();
        }
    });
});
于 2013-02-28T17:03:22.027 回答