Оптимизация 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^=elem]").draggable({
    // your draggable options...
}).resizable({
    // your resizable options...
});

Answer 2

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    

    });
});

Answer 3

Если ваш код отличается только строками, относящимися к определенному идентификатору элемента, вы можете уменьшить дублирование кода следующим образом:

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