Question

这段代码有效，但对我来说似乎有点长。我绝对不得不写JS / Jquery，所以我非常喜欢。

我正在克隆一个元素，然后用我创建的一个替换所有属性。

这是JSFiddle，或下面的代码片段：http://jsfiddle.net/og6Lcof0/3/

HTML：

<div id="eqblock" style="display:inline-block">

  <li id="equipment-0"><label for="equipment-0">Equipment</label> <select id="equipment-0" name="equipment-0"><option selected value="1">T700</option><option value="3">iLink</option></select></li>

  <li id="equipment-1"><label for="equipment-1">Equipment</label> <select id="equipment-1" name="equipment-1"><option selected value="1">T700</option><option value="3">iLink</option></select></li>

  <li id="equipment-2"><label for="equipment-2">Equipment</label> <select id="equipment-2" name="equipment-2"><option value="1">T700</option><option selected value="3">iLink</option></select></li>

</div>
<div id="modblock" style="display:inline-block">

  <li id="mod-0"><label for="mod-0">Method of Delivery</label> <input id="mod-0" name="mod-0" type="text" value="mod1">  <a href="#" id="remove_eq_0">Remove</a></li>

  <li id="mod-1"><label for="mod-1">Method of Delivery</label> <input id="mod-1" name="mod-1" type="text" value="mod2">  <a href="#" id="remove_eq_1">Remove</a></li>

  <li id="mod-2"><label for="mod-2">Method of Delivery</label> <input id="mod-2" name="mod-2" type="text" value="mod3">  <a href="#" id="remove_eq_2">Remove</a></li>

</div>

<a href="#" id="add_eq">Add Equipment</a>

JS / JQ：

$( "#add_eq" ).click(function () {
    var num = findNum();
    if (typeof num !== 'undefined') {
        var $eqLabel = 'equipment-' + num;

        var $newEq = $( '#eqblock li:first' ).clone( false );
        $( $newEq ).attr( 'id', $eqLabel );
        $( 'label', $newEq ).attr( 'for', $eqLabel );
        $( 'select', $newEq ).attr( 'id', $eqLabel );
        $( 'select', $newEq ).attr( 'name', $eqLabel );
        $( "#eqblock" ).append( $newEq );

        var $modLabel = 'mod-' + num;
        var $newMod = $( '#modblock li:first' ).clone( false );
        $( $newMod ).attr( 'id', $modLabel );
        $( 'label', $newMod ).attr( 'for', $modLabel );
        $( 'input', $newMod ).attr( 'id', $modLabel );
        $( 'input', $newMod ).attr( 'name', $modLabel );
        $( 'input', $newMod ).attr( 'value', " ");
        $( 'input', $newMod ).val( '' );
        $( 'a', $newMod ).attr( 'id', 'remove_eq_' + num);
        $( "#modblock" ).append( $newMod );
    };
});

这是一个更新的JSFiddle，其中包含我已完成的参考代码 http://jsfiddle.net/og6Lcof0/4/

感谢大家的帮助！

Answer 1

您的问题的本质并不适合完全自动化，但您可以使用一些语法快捷方式来减少重复。而不是：

    $( 'label', $newMod ).attr( 'for', $modLabel );
    $( 'input', $newMod ).attr( 'id', $modLabel );
    $( 'input', $newMod ).attr( 'name', $modLabel );
    $( 'input', $newMod ).attr( 'value', " ");
    $( 'input', $newMod ).val( '' );

尝试：

    $( 'label', $newMod ).attr( 'for', $modLabel );
    $( 'input', $newMod )
        .attr({
            id: $modLabel,
            name: $modLabel,
            value: " "
        })
       .val( '' );

Answer 2

您可以大大简化HTML，这可能会让您简化JavaScript。

目前，您有重复的ID，HTML中不允许这样做：

<li id="equipment-0">
  <label for="equipment-0">Equipment</label>
  <select id="equipment-0" name="equipment-0">
    <option selected value="1">T700</option>
    <option value="3">iLink</option>
  </select>
</li>

您可能不需要li的ID，因此请将其删除。

您也可以删除标签＆＃39;将for和select元素设置为标签的子元素input。完成此操作后，您可能不再需要id和select元素input。

将上述HTML缩减为：

<li>
  <label>Equipment
    <select name="equipment-0">
      <option selected value="1">T700</option>
      <option value="3">iLink</option>
    </select>
  </label>
</li>

此时，您只剩下一个在克隆后需要更改的属性。

Answer 3

简短的回答：没有更好的方法。

答案很长：

您可以将jQuery对象分配到变量中，这样就不必重复查询选择器了。

e.g。

$( 'input', $newMod ).attr( 'id', $modLabel );
$( 'input', $newMod ).attr( 'name', $modLabel );
$( 'input', $newMod ).attr( 'value', " ");
$( 'input', $newMod ).val( '' );

变为

var newModInput = $( 'input', $newMod );
newModInput.attr( 'id', $modLabel );
newModInput.attr( 'name', $modLabel );
newModInput.attr( 'value', " ");
newModInput.val( '' );

由于不必每次遍历$ newMod来查找输入，因此稍微也可以更高效。但是还不足以注意到。

Answer 4

你可以使用把手简化模板，你可以在这里看看（http://handlebarsjs.com/）把手适用于JQuery。

您可以创建模板（在html中附加此脚本标记）

<script id="equipment-template" type="text/x-handlebars-template">
<li id="{{eqLabel}}">
    <label for="{{eqLabel}}">Equipment</label>
    <select id="{{eqLabel}}" name="{{eqLabel}}">
        <option selected value="1">T700</option>
        <option value="3">iLink</option>
    </select>
</li>
</script>

如果您看到上面的模板包含关键字“eqLabel”，则这些是由json替换的动态变量。

在您的domready中

var equipmentTemplate   = $("#equipment-template").html();
var $equipmentTemplate = Handlebars.compile(equipmentTemplate);

$ equipmentTemplate包含已编译的equipmentTemplate，将带有正确key：value对的json传递给$ equipmentTemplate，它将用值替换键

var $eqLabel = 'equipment-' + num;
var eqContext = {eqLabel: $eqLabel};
var eqhtml    = $equipmentTemplate(eqContext);
$( "#eqblock" ).append( eqhtml );

你可以用modblock做同样的事。

示例：http://jsfiddle.net/r3n5xjpv/

更换克隆元素的所有属性的更好方法是什么？

4 个答案: