是否可以将此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")中调用它。没有测试过，但它应该工作。如果用例是您描述的用例，那么将任何非静态的部分更改为函数参数就足够了。

欢迎使用jQuery！

Answer 2

这样的事情应该有效

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

如何使用这样：

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