jquery-ui - jQuery UI 可选 - 我做错了什么？

Question

我知道我对 jQuery UI 可选代码做错了，但我不知道到底是什么。另外，如何将 jQuery UI 可选代码的两部分压缩为一个函数？

谢谢！

HTML：

<ul id="monthPicker">
    <li class="month ui-selectable">January</li>
    <li class="month ui-selectable">February</li>
    <li class="month ui-selectable">March</li>
    <li class="month ui-selectable">April</li>
    <li class="month ui-selectable">May</li>
    <li class="month ui-selectable">June</li>
    <li class="month ui-selectable">July</li>
    <li class="month ui-selectable">August</li>
    <li class="month ui-selectable">September</li>
    <li class="month ui-selectable">October</li>
    <li class="month ui-selectable">November</li>
    <li class="month ui-selectable">December</li>
</ul>

jQuery：

$(document).ready(function() {

    //works
    $('.month').bind('click', function() {
        $(this).toggleClass('picked');
    });

    //doesn't work 
    $('.month').selectable({ 
        selected: function(event, ui) { 
            if($(this).hasClass('picked')){
                $(this).removeClass('picked');
            }                       
            else{
                $(this).addClass('picked');
            }
        }
    });

    //doesn't work
     $('.month').selectable({   
        unselected:function(event, ui) { 
            if($(this).hasClass('picked')){
                $(this).removeClass('picked');
            }                       
            else{
                $(this).addClass('picked');
            }
        }
    });

});

Answer 1

您应该调用selectable父元素，而不是子元素：

$('#monthPicker').selectable();

ui-selected当用户选择它们时，选择的项目会被赋予类。

如果你想对列表项（<li>元素）进行样式设置，它们会被赋予 class ui-selectee。