jquery克隆多个实例的原因

Question

希望可以提供帮助，尝试Jquery克隆似乎是有效的，但我得到了“多个”克隆，而不是单个克隆“按下”按钮。

例如:我想克隆这个：

echo '<select class="hello">';
    foreach ($pageposts as $post):
    echo '<option>'.$post->post_title.'</option>';
    endforeach;
    echo '</select>';

点击此按钮

echo '<input type="button" id="rp" value="add">';

来自WordPress的Yes和来自JQuery页面的Yes

我的JQuery函数是：

$j=jQuery.noConflict();
$j(document).ready(function() {
$j('#rp').click(function(){ 
$j('.hello').clone().appendTo('#goodbye');
});
});

所以我的“总体代码片段”看起来是这样的：

echo '<select class="hello">';
foreach ($pageposts as $post):
echo '<option>'.$post->post_title.'</option>';
endforeach;
echo '</select>';
echo '<div id="goodbye"></div>';
echo '<input type="button" id="rp" value="add">';

我在第一次按下时克隆了“一次”，但随后它又出现了多次，即：

单击1次即可获得1个克隆加1个原件-我想要的

点击2次可得到3个克隆加1个原创--这不是我想要的，我想要1个原创加2个

3点击给出7个克隆加1个原创-不是我想要的，我想要1个原创加3个等等。

请给我一些建议。谢谢

Answer 1

这是因为您的选择器正在寻找一个类：

$j('.hello')

每次克隆这个元素并将其附加到另一个元素时，您就添加了另一个.hello元素，因此您克隆了它能找到的每个.hello元素。

也许您应该在克隆类名时将其删除：

$j('.hello').clone().removeClass('hello').appendTo('#goodbye');

或者甚至可以改变它：

$j('.hello').clone().removeClass('hello').addClass('cloned_hello').appendTo('#goodbye');

您可能想要添加一个不同的类，以便您的CSS仍然可以工作，但最终这就是为什么您会获得多个克隆项的原因。

Answer 2

这种行为是正常的，因为您克隆了其中包含hello类的每个元素。

试试这个：

$j('.hello').clone().attr("class","cloned").appendTo('#goodbye');

在.cloned中和在.hello中一样放入css。

希望它能有所帮助:)