Selectable -获取内部选定项

Question

当在元素上使用selecting时，我正在尝试获取选定的项。下面是html代码：

<div id="yearCal" class="ui-selectable">
    <div id="month_1" class="month">
        <div class="monthTitle">January</div>
        <div class="monthDays" id="month_1_days">
            <div class="monthDay ui-selectee" id="1-1">1</div>
            <div class="monthDay ui-selectee" id="1-2">2</div>
            ...
        </div>
        ...
    </div>
</div>

这是jQuery代码：

$( "#yearCal" ).selectable({ filter: "div.monthDay" });
$( "#yearCal" ).on( "selectableselecting", function( event, ui ) {
    console.log($("div#yearCal.monthDay ui-selectee ui-selected"));
} );

如果我选择yearCal的元素，如何获取所选项目？我想要做的是，如果我选择1月1日，然后选择2月1日，我希望选择这两天之间的所有天/div项。因此，我需要所选项目的ids。如何获取所选项目？

Answer 1

您可以在函数selectableselecting和selectableunselecting中使用ui.selecting.id获取选定的内部项。

文档：http://api.jqueryui.com/selectable/#event-selecting和http://api.jqueryui.com/selectable/#event-unselecting

在这段代码中，我记录了选定的元素并设置了一个特定的类，但您可以执行所有操作：

$("#yearCal").on("selectableselecting", function (event, ui) {
    console.log(ui.selecting.id);
    $('#' + ui.selecting.id).addClass('boxed');
});

$("#yearCal").on("selectableunselecting", function (event, ui) {
    console.log(ui.unselecting.id);
    $('#' + ui.unselecting.id).removeClass('boxed');
});

这是一个有用的小提琴：http://jsfiddle.net/IrvinDominin/shTpK/