克隆与父母克隆做同样的事情答案

【问题标题】：cloning does the same thing as parents clone克隆与父母克隆做同样的事情
【发布时间】：2019-11-27 17:20:39
【问题描述】：

我有这样的代码，当我在单击按钮克隆之前从选择框中选择列表时，它是显示数据，所以在我单击按钮克隆之后，为什么它直接出现在克隆上的数据？我想要的是当我从选择框克隆中选择列表时，在我从选择框克隆中选择列表之前，克隆不会直接出现数据。

其他问题是克隆对她父母或其他克隆的影响。如何在不影响其他克隆的情况下克隆技术？

$(document).ready(function(){
		$(document).on( "click", "a#addhewan", function() {
			var confirm = window.confirm('Yakin menambah data hewan??');            
			if(confirm == true){                
				var newForm = $('.form1 .data_hewan').html();            
				$(newForm).insertBefore('.newForm');
	            // $('.master-hewan').addClass('hidden');        
	        }
	    });

		$(document).on("change","#pet_name",function(){
			var allRule = $('.all-rule');
			if($(this).val() == 1){
				var form1 = $('.form1').find('.all-rule .formRule1').clone().removeClass('hidden');
				$(form1).appendTo('.show-rule');
			}
		})
	});

.hidden{
		display: none;
	}

<!DOCTYPE html>
<html>
<head>
	<title>fdsjf</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<div class="form1">
		<div class="data_hewan">
			<select name="pet" class="form-control" id="pet_name">
				<option value="" selected="selected">Pilih Ras Hewan</option>
				<option value="1">Korean Jindo</option>
				<option value="2">Siberian Husky</option>
				<option value="3">Maine Coon</option>
			</select>

			<div class="all-rule hidden">
				<div class="formRule1 hidden">
					<span>halo</span>
				</div>
				<div class="formRule2 hidden">
					<span>eooo</span>
				</div>
			</div>
			<div class="show-rule">
			</div>
			<div class="newForm">

			</div>
		</div>
		<a id="addhewan" name="add" id="addhewan">Add Hewan</a>
	</div>

	
</body>
</html>

我想要什么：

【问题讨论】：

$('.form1').find('.all-rule').each(".formRule").clone().removeClass('hidden').find("span").text("") 或任何你想清除的东西，你可能不得不玩弄克隆功能
@yardpenalty 我不想清除，但我想要的是克隆不会影响另一个克隆或她的父母，我给的代码我认为这是错误的。当我克隆并选择“韩国珍多”时，它会影响另一个。如何在不影响对方的情况下克隆，谢谢回复
所以新的克隆对于它自己采取行动是新鲜的
好吧，如果我理解正确的话，你必须先捕获克隆并用变量名指向它。然后移除隐藏类并清除span中的文本。像var field = $('.form1').find('.all-rule .formRule1')clone(); field.removeClass("hidden").find("span").text(""); $(field).appendTo('.show-rule'); 这样的东西，为了清晰起见，我建议使用 id 来表示形式。
试试这个jsfiddle

标签： jquery clone

【解决方案1】：

您需要修复 html 和 jQuery 选择器 $('.form1').find('.all-rule .formRule1') 将适用于所有 .formRule1 因此您需要指定父级。检查下面的代码：

$(document).ready(function(){
		$(document).on( "click", "a#addhewan", function() {
			var confirm = window.confirm('Yakin menambah data hewan??');            
			if(confirm == true){                
			    var newForm = $('.form1 .data_hewan:first').clone();            
                newForm.find('.show-rule').html('');
				newForm.insertBefore('.newForm');
	            // $('.master-hewan').addClass('hidden');        
	        }
	    });

		$(document).on("change","#pet_name",function(){
			var data = $(this).parent();
			if($(this).val() == 1){
				var form1 = data.find('.all-rule .formRule1').clone().removeClass('hidden');
				form1.appendTo(data.find('.show-rule'));
			}
		})
	});

.hidden{
		display: none;
	}

<!DOCTYPE html>
<html>
<head>
	<title>fdsjf</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<div class="form1">
		<div class="data_hewan">
			<select name="pet" class="form-control" id="pet_name">
				<option value="" selected="selected">Pilih Ras Hewan</option>
				<option value="1">Korean Jindo</option>
				<option value="2">Siberian Husky</option>
				<option value="3">Maine Coon</option>
			</select>

			<div class="all-rule hidden">
				<div class="formRule1 hidden">
					<span>halo</span>
				</div>
				<div class="formRule2 hidden">
					<span>eooo</span>
				</div>
			</div>
			<div class="show-rule">
			</div>
		</div>
		<div class="newForm"></div>
		<a id="addhewan" name="add" id="addhewan">Add Hewan</a>
	</div>

	
</body>
</html>

【讨论】：

我可以再问一次吗？ @atmahadli
@ronies 不客气。我不是每天都营业，但您可以随时在此处询问。