JQuery UI Selectable 在用户点击的列表中找到 <li> 元素

Question

我希望能够在可选的 jQueryUI 中获取用户单击的 <li> 元素。这是因为我想找出他们点击的元素是否已经被选中，然后根据它做一些事情。这是我工作的代码：

$(document).ready(function() // Execute all of this on load 
  {
    // Add week selector
    $(function() {
      var startElementSelected = false;

      $("#popupWeeks").selectable({
        start: function(e) {
          var classSelected = e.toElement.className.search("ui-selected");

          if (classSelected != -1) {
            startElementSelected = true;
          } else {
            startElementSelected = false;
          }
        }
      });
    });
  });

问题是这适用于 chrome，但不适用于 Firefox，我可以用它来为两者都工作。我寻找了相当于e.toElement.className 的firefox，但找不到任何东西，而且我在点击事件的事件处理方面遇到了麻烦。

非常感谢任何帮助。

Answer 1

jQuery 的主要优点之一是它可以在后台为您处理不同的浏览器不一致问题，因此您可能也应该在这种情况下使用它。

由于 jQuery selectable 将 ui-selected 类赋予选定（单击）元素，您可以做的是在具有该类的 selectable 中找到 li 元素。例如：

$('#popupWeeks li.ui-selected');

或者您可以检查元素是否具有所需的类，例如：

element.hasClass('ui-selected');

Here is a fiddle example

编辑：

根据您的评论，我相信您可以解决您需要的方法是跟踪某些结构中的选定元素。

然后根据用户行为添加/删除元素。

我决定使用数组来实现：

 var selectedItems = [];                                   // array to hold currently selected items

 $( 'li.ui-widget-content' ).on('click', function() {

     var id = $(this).attr('id'),
         isSelected = $(this).hasClass('ui-selected');

     if(selectedItems.indexOf(id) != -1) {                 // if element already selected, alert us
         alert('Product #' + id + ' was already clicked');   
     } else if(isSelected) {                               // if element selected for first time
         selectedItems.length = 0;                         // clear the array
         $('.ui-selected').each(function() {
             selectedItems.push($(this).attr('id'));       // add all the selected items
         });
     } else {                                              // otherwise element is unselected and we remove it
         selectedItems.splice(selectedItems.indexOf(id), 1);   
     }
     console.log('selected items: ' + selectedItems);      // open the console to see the selected items after each click
 });

Here is a fiddle example