2

クローンボタンでクローンを作成し、クローンファイルを削除するためにボタンを削除する必要がある単一のファイルがあります。この単純なスクリプトを作成しましたが、機能しないため、何か問題が含まれていると思います:)

HTML

<form method="post">
    <div id="fileds">
    <select name="lang" id='lang'>
    <option>select language</option>
    </select>
     </div>
    </form>
    <div class="actions">
        <button class="clone">Clone</button> 
        <button class="remove">Remove</button>
    </div>

JS

$(function(){
    var regex = /^(.*)(\d)+$/i;
    var cloneIndex = $("#lang").length;

    $("button.clone").live("click", function(){
        $(this).parents("#lang").clone()
            .appendTo(".fileds")
            .attr("id", "lang" +  cloneIndex)
            .find("*").each(function() {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = match[1] + (cloneIndex);
                }
        });
        cloneIndex++;
    });


});

また、削除ボタンの削除コードの書き方もわかりませんでした

ありがとうございました

4

2 に答える 2

2

1)#langは親ではありません.clone

2) ID は.fieldsそのままである必要があります#field

このコードは機能するはずです。ライブデモ

$(function() {
    var counter = 1;

    $(".clone").live("click", function() {
        $("#lang:first").clone().appendTo("#fileds").addClass("lang" + counter);
        counter++
    });

    $(".remove").live('click', function() {
        if (counter > 1) { //Only apply if the lang field is more than 1
            counter = counter - 1;
            $("#lang:last").remove();
        }
    });

});​
于 2012-07-06T04:15:45.177 に答える
0

これlangはボタンの親ではありません。削除ボタンのクラスとハンドラーを追加しました。これを試してください：

$(function(){
    $(".clone").on("click", function() { // you can use `on` instead of live which is deprecated 
        var cloneIndex = $(".lang").length; // you can find the the current length of `.lang` within the handler  
        $(".lang:last").clone() // clones the last element with class of `lang`
            .attr("id", "lang" +  cloneIndex)
            .appendTo("#fileds") // change this to id selector
        });
     $("button.remove").on("click", function(){ // '.remove' click handler
         $(".lang:last").remove()
     })  
});

デモ

于 2012-07-06T04:20:17.937 に答える