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

为所有“elemX”添加一个类，以便您可以轻松地定位它们。
使用ID获取“数字”
使用该号码做任何你需要的事情
利润

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

$('.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    

    });
});

可拖动和可调整大小的Jquery优化

3 个答案: