如何在jquery中减少这些行？

Question

我在jquery中有许多下面的行，格式如下。我想减少我乘坐的线路的数量。有什么建议请多多指教！

//jquery
     $(function() { 
    $( "#draggable1" ).draggable({ revert: true, containment : '#removeme1', axis : 'x'});
    $( "#draggable2" ).draggable({ revert: true, containment : '#removeme2', axis : 'x'});  
    $( "#draggable3" ).draggable({ revert: true, containment : '#removeme3', axis : 'x' });     
    $( "#draggable4" ).draggable({ revert: true, containment : '#removeme4', axis : 'x' });     
    $( "#draggable5" ).draggable({ revert: true, containment : '#removeme5', axis : 'x' }); 
    $( "#draggable6" ).draggable({ revert: true, containment : '#removeme6', axis : 'x' });     
    $( "#draggable7" ).draggable({ revert: true, containment : '#removeme7', axis : 'x' });

                       });

Answer 1

只需添加一个类draggable，并根据标记设置为包含父元素或将包含元素存储为可拖动元素上的属性。

$( ".draggable" ).draggable({ revert: true, containment : 'parent', axis : 'x'});

如果容器不是父容器：

$( ".draggable" ).each(function(){
    $(this).draggable({ revert: true,
                     containment : $(this).data("container"),
                     axis : 'x'
                   });
});

// with the following HTML markup:

<div class="draggable" data-container="#removeme1"></div>

Answer 2

一个简单的for循环？

$(function () {
    for (var i = 1; i <= 7; i++) {
        $("#draggable" + i).draggable({
            revert: true,
            containment: '#removeme' + i,
            axis: 'x'
        });
    }
});

Answer 3

这是一种灵活的解决方案，可以处理任意数量的可拖动对象。

$(function () {
    $("div[id^='draggable']").each(function (index) {
        $(this).draggable({
            revert: true,
            containment: $(this).attr('id').val().replace('draggable', 'removeme'),
            axis: 'x'
        });
    });    
});