JqueryUI Có thể chọn - không chọn mà không cần Ctrl

Question

Tôi đang cố tạo danh sách có thể chọn với dấu ngoặc đơn gốc/con/cháu. Xin vui lòng xem bên dưới:

http://jsfiddle.net/Lmsop4k7/

$('#theParentList').selectable({ 
    filter: 'li div', 
    selected: function (event, ui) { 
     var selectedText = $(ui.selected).text(); 
     $("#selectedNode").text(selectedText); 

     if ($(ui.selected).hasClass('selectedfilter')) { 
      $(ui.selected).removeClass('selectedfilter'); 
     }    
    } 
}); 

Nhưng, tôi đang gặp rất nhiều vấn đề đến với chức năng "bỏ chọn" (ví dụ mà không cần phải bấm phím Ctrl). Tôi cũng không muốn "liên kết" Ctrl tự động để di chuột xuống (được mô tả trong một số giải pháp khác), b/c Tôi chỉ muốn một mục được chọn cùng một lúc. Ngoài ra, tôi chỉ muốn hiểu cách thực hiện luồng kiểm soát để bỏ chọn các sự kiện (ví dụ: "đã chọn:").

Tôi đang làm gì sai ở đây? Như bạn có thể thấy, lựa chọn được chọn chính xác vì hộp văn bản được cập nhật chính xác với văn bản chính xác. Tuy nhiên, khi tôi nhấp vào một mục đã được nhấp để "bỏ chọn" (không giữ phím Ctrl), nó không bỏ chọn. Tôi hình ngay cả trong tình huống này, một sự kiện "được chọn" được kích hoạt - nhưng rõ ràng có điều gì đó sai với mã "đã chọn" của tôi. Rất bực bội ..

Cảm ơn mọi người.

Answer 1

Vì vậy, tôi fiddled với nó hơn một chút, và tìm thấy những gì tôi cần. Vui lòng xem bên dưới. Đã thêm văn bản gỡ lỗi, trong trường hợp có thể hữu ích cho người nào đó sau này. Tôi sẽ tạo một chủ đề khác cho "câu hỏi phụ" của tôi về thụt đầu dòng. Cảm ơn mọi người.

http://jsfiddle.net/bgfn3091/2/

$('#theParentList').selectable({ 
     filter: 'li div', 
     selected: function (event, ui) { 
      var selectedText = $(ui.selected).text(); 
      $("#selectedNode").text(selectedText); 

      $(ui.selected).removeClass('ui.selected'); 

      $("#debugText").text("Selected");    

      if ($(ui.selected).hasClass('alreadySelected')) { // clicking to de-select 
       $('#theParentList .alreadySelected').removeClass('alreadySelected'); 
       $(ui.selected).removeClass('ui-selected'); 

       $("#debugText").text("alreadySelected is present and removed");         
      } 
      else // clicking to select 
      { 
       $('#theParentList .alreadySelected').removeClass('alreadySelected'); 
       $(ui.selected).addClass('alreadySelected'); // add to just this element 

       $("#debugText").text("alreadySelected added");              
      } 
     } 
    }); 

Answer 2

Hãy thử

// utilize `dblclick` event to remove selected class 
$(".ui-selected").one("dblclick", function(e) { 
    $(e.target).removeClass("ui-selected") 
}); 

http://jsfiddle.net/Lmsop4k7/3/

Answer 3

Dưới đây là của tôi:

http://jsfiddle.net/carlcarl/Lmsop4k7/4/

Bạn có thể kéo chọn/bỏ chọn mà không cần báo Ctrl.

Trong lựa chọn/bỏ chọn, nếu tất cả những gì bạn đã chọn được chọn trước đó, hãy đặt hành động này là không chọn. Nếu nhiều hơn một không được chọn trước đó, hãy đặt hành động này làm lựa chọn.