javascript - 父元素的 Jquery 克隆和附加

Question

我有 3 个单选按钮可以打开各个 div。所有 3 个 div 都有输入框，可以通过单击输入框旁边的添加按钮来添加这些输入框。

现在的问题是，

输入框应该只添加到相应的单选检查 div，但现在它适用于所有 3 div 输入框。如果您选中任何一个单选按钮并单击输入旁边的添加按钮，添加几个输入框然后转到另一个单选按钮，您也可以在那里看到相同的操作，这实际上不应该是正确的。

这是代码和 fiddle

$filtr = $('.filtr');

        $filtr.on('click', '.add', function(){
            $(this).closest('.loop').clone().appendTo( $('.test') );
        });

        $filtr.on('click', '.del', function(){
           $(this).closest('.loop').remove();
        });

        $('#1lev, #2lev, #3lev').hide();

DEMO

Answer 1

看这里:http://jsfiddle.net/VMBtC/2/

我改变了这个:

$filtr.on('click', '.add', function(){
    $(this).closest('.loop').clone().appendTo( $('.test') );
});

为此:

$filtr.on('click', '.add', function(){
    $(this).closest('.loop').clone().appendTo( $(this).closest('.test') );
});

希望对你有帮助

---

编辑

单选按钮改进:检查这里 -> http://jsfiddle.net/VMBtC/3/

JS

$(":radio").click(function(){
     $(".test").hide();
     var show = $(this).attr("data-show");
     $("#"+show).show(300)
});

HTML

<label><input name="1 Level" type="radio" value="0" data-show="1lev" />1 Level</label>
<label><input name="1 Level" type="radio" value="1" data-show="2lev" />2 Level</label>
<label><input name="1 Level" type="radio" value="2" data-show="3lev" />3 Level</label>