Question

我正在尝试获取所选项目，当选择用于元素时。这是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项目。因此，我想要所选项目的ID。如何获取所选项目？

Answer 1

您可以使用ui.selecting.id和selectableselecting内的selectableunselecting获取所选内部条目。

文档：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/

可选 - 获取内部选定项目

1 个答案: