jQuery 对 Draggable 和 Resizable 的优化

Question

我正在寻求一些关于 jquery 的帮助。有人能告诉我优化在许多不同但名称相似的元素上使用 .draggable 和 .sizable 的最佳方法吗

例如

    $( "#elem1" ).draggable({

        many lines of code
    });

    $( "#elem2" ).draggable({

        many lines of code
    });

    $( "#elem3" ).draggable({

        many lines of code
    });

    $( "#elem4" ).draggable({

        many lines of code
    });

    ...

    $( "#elem1" ).resizable({

        many lines of code
    });

    $( "#elem2" ).resizable({

        many lines of code
    });

    $( "#elem3" ).resizable({

        many lines of code
    });

    $( "#elem4" ).resizable({

        many lines of code
    });

    ...

我确信有一种方法可以简单地将数字 1、2、3 等传递给一些多用途代码，但我不知道该怎么做，因为据我所知，你必须这样做单独的元素。我相信有人会帮我解决这个问题。

非常感谢。

Answer 1

如果您的代码仅与引用特定元素 ID 的字符串不同，您可以像这样减少代码重复：

$("#elem1, #elem2, #elem3, #elem4").resizable({
  var id = $(this).attr('id'); //now you can use the ID without hard coding the string.
});

如果所有可调整大小的元素共享一个公共类，则可以进一步清理它：

$(".resizable-element").resizable({
  var id = $(this).attr('id'); //now you can use the ID without hard coding the string.
});

如果您需要专门访问整数后缀，您可以将该值存储为元素本身的data 属性：

<div id="elem1" data-idSuffix="1" class="resizable-element"></div>

使用上面的标记让我们的示例更进一步：

$(".resizable-element").resizable({
   var id = $(this).attr('id');
   var idSuffix = $(this).data('idSuffix');
});

Answer 2

根据您的标记，您也许可以使用Attribute Starts With selector：

$("[id^=elem]").draggable({
    // your draggable options...
}).resizable({
    // your resizable options...
});

Answer 3

1. 为所有“elemX”添加一个类，以便您轻松定位它们。
2. 使用 id 获取他们的“号码”
3. 用那个号码做任何你需要的事情
4. 利润

如果您的选项确实取决于被实例化的元素，那么您将需要独立激活每个选项，但这并不意味着您不能稍微减少代码。

$('.yourclass').each(function(){
    var $elem = $(this);
    var num = parseInt( $elem.attr('id').slice(4), 10 );
    $elem.draggable({

        option : "depends on " + num    

    }).resizable({

        option : "depends on " + num    

    });
});