клонирование делает то же самое, что и клонирование родителей - PullRequest
Новая
       11

клонирование делает то же самое, что и клонирование родителей

1 голос
/ 10 марта 2019

У меня есть такой код, когда я выбираю список из поля выбора перед тем, как щелкнуть кнопку «клон», это показывает данные, поэтому после этого я нажимаю кнопку «клон», почему это прямое отображение данных на клоне?То, что я хочу, это когда я выбираю список из клона окна выбора, клонирование не отображает данные непосредственно перед тем, как я выбираю клонирование списка из окна выбора.и другие проблемы - это влияние клонирования на других ее родителей или другое клонирование.как клонировать технику без влияния на другой клон? 

$(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>

что я хочу введите описание изображения здесь можете мне помочь, пожалуйста?спасибо

1 Ответ

0 голосов
/ 10 марта 2019

вам нужно исправить 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>
...