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和是的“hello”类来自JQuery页面

我的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 。

希望它有帮助:)