0

以下は、jQuery ui の選択可能なプラグインのコードです。このコードを使用すると、なげなわやキーボードを使用せずに、マウスで複数の選択可能なオブジェクトを選択できます。選択すると、console.log メッセージが firebug に表示されます。複数の選択可能なものを選択し、それらのいくつかを選択解除した場合にも表示されます。

問題は、要素が 1 つしか選択されていないときに選択を解除しても、何も起こらないことです。そのような状況でも 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

あなたの問題は、セレクターが「.ui-selected」であるため、選択した各項目に対してのみ console.log 関数が起動することです。最後の選択を解除すると、何も選択されていないため、関数はまったく起動しません。

次のように、選択されていない項目ごとに別の関数をバインドできます。

$(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 に答える