jquery - 这段 jquery 代码可以写得更短吗？ (初学者)

Question

这是我第一次在 stackoverflow 上提问，所以如果我做错了什么请原谅我。我也是 jquery 新手，但通过阅读和教程，我成功创建了一个工作示例。

下面的代码是我创建的。这意味着我有三个带有可拖动需求的列表和三个可以删除需求的占位符。这个想法是，占位符 1 仅接受列表 1 中的项目，占位符 2 仅接受列表 2 中的项目，占位符 3 来自列表 3。当拖动需求时，占位符将突出显示，以便用户知道可以将其放在哪里。

现在的问题是:有没有办法裁剪这段代码？我感觉这不是最好的方法，它是三次相同的代码，只有两个单词发生了变化。正如我从教程中学到的:永远不要把东西写两次。

还有一个问题:当需求放在占位符中时是否可以在其之间创建一条线？我希望用户单击一个占位符，然后单击另一个占位符来绘制连接。我已经看到很多 html5 canvas 和 jsPlumb 的示例，但我不需要所有这些功能。单击时占位符之间只有一行。

$(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");
    }    
});

正如我所说，我是 jquery 的新手，所以欢迎提供好的解释。提前致谢!

抢

Answer 1

编写一个函数，返回您正在重用的对象，插入行类或需要更改的任何参数:

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;
}

然后按照 $( ".row2 .placeholder").droppable(getSettings(".row2") 中的方式调用它。尚未测试它，但它应该可以工作。更改任何部分如果用例是您所描述的情况，则将 not static 作为函数参数就足够了。

欢迎使用 jQuery!