4

フィールドのグループを何度でも複製できるようにしたいフォームがあります。また、これらの新しいフィールドグループのfield、、、labelの属性を1つ増やしたいと思いidますname。forこれまでjQueryでこれを試し、少なくともフィールドのグループを複製するようにしましたが、removeが機能しません。 。そして、これら3つの属性のそれぞれに対して+1を行う方法がわかりません。私は私が得ることができるどんな助けにも感謝します。

これがそのjsfiddle、http：//jsfiddle.net/Unfxn/です 。

HTML

<form method="post" action="#" class="inlineForm" enctype="multipart/form-data">
    <div class="repeatingSection">
        <a href="#" class="buttonGray buttonRight deleteFight">Delete</a>
        <input type="hidden" name="fighter_a_id_1" id="fighter_a_id_1" value="" />
        <input type="hidden" name="fighter_b_id_1" id="fighter_b_id_1" value="" />
        <input type="hidden" name="winner_id_1" id="winner_id_1" value="" />
        <div class="formRow">
            <label for="fighter_a_1">Fighters</label>
            <input type="text" name="fighter_a_1" id="fighter_a_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_1" id="fighter_b_1" value="" />
        </div>
        <div class="formRow">
            <label for="fighter_a_pay_1">Fighter Pay $</label>
            <input type="text" name="fighter_a_pay_1" id="fighter_a_pay_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_pay_1" id="fighter_b_pay_1" value="" />
        </div>
        <div class="formRow">
            <label for="winner_1">Winner</label>
            <input type="text" name="winner_1" id="winner_1" value="" />
        </div>
        <div class="formRow">
            <label for="method_1">Method</label>
            <input type="text" name="method_1" id="method_1" value="" />
        </div>
        <div class="formRow">
            <label for="method_type_1">Method Type</label>
            <input type="text" name="method_type_1" id="method_type_1" value="" />
        </div>
        <div class="formRow">
            <label for="round_1">Round</label>
            <input type="text" name="round_1" id="round_1" class="fieldSmall" value="" />
        </div>
        <div class="formRow">
            <label for="time_1">Time</label>
            <input type="text" name="time_1" id="time_1" class="fieldSmall" value="" />
        </div>
        <div class="formRow">
            <label for="fight_number_1">Fight #</label>
            <input type="text" name="fight_number_1" id="fight_number_1" class="fieldSmall" value="" />
        </div>
    </div>
    <div class="formRowRepeatingSection">
            <a href="#" class="buttonGray buttonRight addFight">Add Fight</a>
        </div>
    <div class="formRow">
        <input type="submit" class="submitButton" value="Save Fights" />
    </div>
</form>

JS

// Add a new repeating section
$('.addFight').click(function(){
    var lastRepeatingGroup = $('.repeatingSection').last();
    lastRepeatingGroup.clone().insertAfter(lastRepeatingGroup);
    return false;
});
// Delete a repeating section
$('.deleteFight').click(function(){
    $(this).parent('div').remove();
    return false;
});
4

4 に答える 4

8

これにより、3つの要素すべてに応じて自動的に名前が変更されます。

// Add a new repeating section
$('.addFight').click(function(){
    var currentCount =  $('.repeatingSection').length;
    var newCount = currentCount+1;
    var lastRepeatingGroup = $('.repeatingSection').last();
    var newSection = lastRepeatingGroup.clone();
    newSection.insertAfter(lastRepeatingGroup);
    newSection.find("input").each(function (index, input) {
        input.id = input.id.replace("_" + currentCount, "_" + newCount);
        input.name = input.name.replace("_" + currentCount, "_" + newCount);
    });
    newSection.find("label").each(function (index, label) {
        var l = $(label);
        l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount));
    });
    return false;
});

// Delete a repeating section
$('.deleteFight').live('click',function(){
    $(this).parent('div').remove();
    return false;
});​

削除ハンドラーを変更して、代わりに.live（）を使用し、ハンドラーがそのボタンの新しく作成されたコピーにもアタッチされるようにしました。ここで、jquery> 1.7を使用している場合は、.on（）を使用する必要があります

on（）バージョンは次のようになります。

// Delete a repeating section
$(document).on('click','.deleteFight',function(){
    $(this).parent('div').remove();
    return false;
});
于 2012-07-08T02:18:23.197 に答える
2

オブジェクトのクローンを作成した後にこれを使用します

フィドル: )http://jsfiddle.net/fedmich/MZjKR/1/

TODOをいくつか残しておきます。3を現在のIDの数に変更します

<script type="text/javascript">
$.fn.id_changer = function(new_id) {
  return this.each(function(){
    $(this).find('input').each(function(){
        var ob = $(this);
        ob.attr('id',   this.id.replace(/_\d$/, '_' + new_id));
        ob.attr('name', this.name.replace(/_\d$/, '_' + new_id));           
    });
  });
};

于 2012-07-08T02:09:37.390 に答える
2

これが私のバージョンです。

http://jsfiddle.net/Unfxn/27/

これは、繰り返し領域のインデックスに大きく依存しています。したがって、その上に兄弟を追加しないでください。それが必要な場合は、すべての繰り返し領域を別のdivでラップします。

くそ！手遅れです:)とにかく...ここにコードがあります。

// Add a new repeating section
var attrs = ['for', 'id', 'name'];
function resetAttributeNames(section) { 
    var tags = section.find('input, label'), idx = section.index();
    tags.each(function() {
      var $this = $(this);
      $.each(attrs, function(i, attr) {
        var attr_val = $this.attr(attr);
        if (attr_val) {
            $this.attr(attr, attr_val.replace(/_\d+$/, '_'+(idx + 1)))
        }
      })
    })
}

$('.addFight').click(function(e){
        e.preventDefault();
        var lastRepeatingGroup = $('.repeatingSection').last();
        var cloned = lastRepeatingGroup.clone(true)  
        cloned.insertAfter(lastRepeatingGroup);
        resetAttributeNames(cloned)
    });

// Delete a repeating section
$('.deleteFight').click(function(e){
        e.preventDefault();
        var current_fight = $(this).parent('div');
        var other_fights = current_fight.siblings('.repeatingSection');
        if (other_fights.length === 0) {
            alert("You should atleast have one fight");
            return;
        }
        current_fight.slideUp('slow', function() {
            current_fight.remove();

            // reset fight indexes
            other_fights.each(function() {
               resetAttributeNames($(this)); 
            })            
        })   
    });


​
于 2012-07-08T02:36:20.730 に答える
0

フィールドとしてetcなどを使用する場合name=method[]は、POST変数に配列を取得するため、明示的なインデックス付けは必要ありません。

于 2021-02-09T17:57:38.743 に答える