2

clone() スクリプトには 2 つの主な問題があります。

  1. div のクローンを作成するたびに、インクリメント値でテキストを変更したいと思います。たとえば、新しいブロックには「Block 2」というタイトルが必要です...など。
  2. ラジオ ボタンをクリックして複製すると、複製されたブロックでラジオが選択されたままになります。スクリプトですでに値を空の値に設定していますが、最初のクローンでは機能していないようです。

HTML:

<div>
    <div id="mydiv">
        <div class="title">Block 1</div>
        <div>
            <input type="radio" name="blockoption" value="left"> Radio 1<br />
            <input type="radio" name="blockoption" value="right"> Radio 2<br />
            <select>
                <option selected="selected">Select</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select><br />
            <input type="text" name="blocktext" />
        </div>
    </div>
</div>
<input id="addbutton" type="button" value="Add Block" />&nbsp;<input id="removebutton" type="button" value="Remove Block" />

jQuery:

$("#addbutton").click(function () {
var inc = $('#mydiv').siblings().length;
$('#mydiv:first-child').clone().insertAfter('#mydiv:last-child').find('input').val('');
$('#mydiv').find('.title').each(function() {
    $(this).text().replace(/\d+/, inc+2);
});
});

$("#removebutton").click(function () {
var inc = $('#mydiv').siblings().length;
if (inc > 0) {
    $('#mydiv:last-child').remove('#mydiv');
    $('#mydiv').find('.title').each(function() {
        $(this).text().replace(/\d+/, inc-2);
    });
}
});

ここで実際のコードを参照してください。

4

1 に答える 1

3

ID 属性を持つ要素を複製すると、ドキュメントが無効になり、代わりにクラスを使用できます。プロパティを削除するcheckedには、メソッドselectedを使用できますprop。

$("#addbutton").click(function() {
    var inc = $('.mydiv').length;
    var cloned = $('.mydiv:first').clone()
        .find('.title').text('Block' + ++inc).end()
        .find('input').val('').prop('checked', false).end()
        .find('option').prop('selected', false).end()
        .appendTo('.wrapper')
});

$("#removebutton").click(function() {
    $('.mydiv:last').remove()
});

http://jsfiddle.net/b7knT/

于 2012-11-14T02:54:16.050 に答える