0

我正在寻求一些关于 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 等传递给一些多用途代码，但我不确定如何执行此操作，因为据我所知，您必须单独执行这些元素。我相信有人会把我放在这上面。

提前谢谢了。

4

3 回答 3

0

如果您的代码仅与引用特定元素 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');
});
于 2012-01-17T19:04:38.023 回答
0

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

$("[id^=elem]").draggable({
    // your draggable options...
}).resizable({
    // your resizable options...
});
于 2012-01-17T19:05:10.390 回答
0
  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    

    });
});
于 2012-01-17T19:10:30.277 回答