Có thể viết mã jquery này ngắn hơn không? (người mới bắt đầu)

Question

Đây là lần đầu tiên tôi hỏi điều gì đó trên stackoverflow để tha thứ cho tôi nếu tôi làm bất cứ điều gì sai trái. Tôi cũng mới để jquery nhưng thông qua đọc và hướng dẫn tôi quản lý để tạo ra một ví dụ làm việc.

Mã bên dưới là những gì tôi đã tạo. Ý nghĩa của việc này là tôi có ba danh sách với các yêu cầu có thể kéo và ba trình giữ chỗ, nơi các yêu cầu có thể bị loại bỏ. Ý tưởng là giữ chỗ 1 chỉ chấp nhận các mục từ danh sách 1, giữ chỗ 2 chỉ từ danh sách 2 và trình giữ chỗ 3 từ danh sách 3. Khi một yêu cầu được kéo giữ chỗ sẽ được đánh dấu để người dùng biết nơi nó có thể bị bỏ.

Vì vậy, bây giờ cho câu hỏi: Có cách nào để cắt mã này không? Tôi có cảm giác đây không phải là cách tốt nhất, đó là ba lần cùng một mã chỉ với hai từ đang thay đổi. Như tôi đã học được từ các hướng dẫn: Không bao giờ viết những thứ hai lần.

Ngoài ra một câu hỏi khác: Có thể nào khi các yêu cầu được xóa trong trình giữ chỗ để tạo một đường thẳng giữa nó? Tôi muốn người dùng nhấp vào một trình giữ chỗ và nhấp vào trình giữ chỗ khác để vẽ kết nối. Tôi đã thấy rất nhiều ví dụ với canvas html5 và jsPlumb nhưng tôi không cần tất cả các chức năng đó. Chỉ có một dòng giữa các trình giữ chỗ khi được nhấp.

$(function() { 
    $("#requirements").accordion(); 
    $("#requirements ul li").draggable({ 
    appendTo: "body", 
    helper: "clone" 
}); 

$(".row1 .placeholder").droppable({ //makes row1 .placeholder a droppable area 
    accept: "#requirements .row1 li ", 
    activeClass: "ui-state-hover", 
    drop: function(event, ui) { 
     var $this = $(this); 
     $("<li></li>").text(ui.draggable.text()).appendTo(this); 
     $this.droppable('disable').addClass("highlighted"); 
    } 
}); 

$(".row2 .placeholder").droppable({ //makes row2 .placeholder a droppable area 
    accept: "#requirements .row2 li ", 
    activeClass: "ui-state-hover", 
    drop: function(event, ui) { 
     var $this = $(this); 
     $this.find(".placeholder").remove(); 
     $("<li></li>").text(ui.draggable.text()).appendTo(this); 
     $this.droppable('disable').addClass("highlighted"); 
    } 
}); 

$(".row3 .placeholder").droppable({ //makes row3 .placeholder a droppable area 
    accept: "#requirements .row3 li ", 
    activeClass: "ui-state-hover", 
    drop: function(event, ui) { 
     var $this = $(this); 
     $this.find(".placeholder").remove(); 
     $("<li></li>").text(ui.draggable.text()).appendTo(this); 
     $this.droppable('disable').addClass("highlighted"); 
    }  
}); 

Như đã nói tôi mới làm quen với lời giải thích tốt nên được hoan nghênh. Cảm ơn trước!

Rob

Answer 1

Viết một hàm trả về đối tượng mà bạn đang sử dụng lại, chèn lớp hàng hoặc bất cứ thông số cần phải thay đổi trong đó:

function getSettings(rowClass){ 
    var obj ={ //makes row1 .placeholder a droppable area 
     accept: "#requirements "+rowClass+" li ", 
     activeClass: "ui-state-hover", 
     drop: function(event, ui) { 
     var $this = $(this); 
     $("<li></li>").text(ui.draggable.text()).appendTo(this); 
     $this.droppable('disable').addClass("highlighted"); 
     } 
    } 
    return obj; 
} 

Sau đó gọi nó như trong $(".row2 .placeholder").droppable(getSettings(".row2"). Chưa thử nghiệm nó, nhưng nó sẽ hoạt động. Việc thay đổi bất kỳ phần nào không tĩnh để trở thành tham số chức năng sẽ là đủ nếu trường hợp sử dụng là một trong những trường hợp bạn mô tả.

Chào mừng bạn đến với jQuery!

Answer 2

Something như thế này nên làm việc

var rowArr = [".row1", ".row2", ".row3"]; 
$(rowArr).each(function(curr) { 
    $(curr + " .placeholder").droppable({ 
     accept: "#requirements " + curr + " li", 
     /*rest of the code remains the same*/ 
    }); 
}); 

Answer 3

Làm thế nào về việc sử dụng như thế này:

$(".row1 .placeholder, .row2 .placeholder, .row3 .placeholder").droppable({ //makes row1 .placeholder a droppable area 
var rowClass = [".row1",".row2", ".row3"]; 
$(rowClass).each(function(thisrow){ 
    accept: "#requirements" + thisrow + "li ", 
     activeClass: "ui-state-hover", 
     drop: function(event, ui) { 
      var $this = $(this); 
      $("<li></li>").text(ui.draggable.text()).appendTo(this); 
      $this.droppable('disable').addClass("highlighted"); 
     } 
}); 
    });