单击动态按钮抓取相应的对象

Question

我使用包含对象的数组创建了一些动态内容。现在，我的动态内容有一个按钮，可以帮助我从“我的数据”中获取相应的对象。点击数组。

我对如何从myData数组中获取相应的对象感到困惑。

你能帮帮我吗？

以下是代码：

＆＃13;

＆＃13;

var myData = [
  { 
	'car': 'Ford',
	'color': 'Black',
	'model': 'Figo'			  
  }, { 
	'car': 'Ford',
	'color': 'Red',
	'model': 'Endeavour'			  
  },{ 
	'car': 'Jaguar',
	'color': 'White',
	'model': 'F-Type'			  
  },
];
 
$(document).ready(function(){
  $('#createData').click(function(){
	myData.forEach(function(obj){
	  $('.container').append(
		$('<div>').addClass('parent').append(
		  $('<div>').append(
			$('<label>').text('Car: '),
			$('<span>').text(obj.car)
		  ),
		  $('<div>').append(
			$('<br /><label>').text('Model: '),
			$('<span>').text(obj.model)
		  ),
		  $('<br /><button>').text('Click Me').addClass('getData')
		)
	  )
	});
  });			
});

$(document).on('click', '.getData', function(obj){
  var myColor = $(this);
  console.log(obj);
});

＆＃13;

.parent {
  border: 1px solid lightgrey;
  border-radius: 5px;
  background-color: skyblue;
  height: 100px;
  margin-top: 5px;
  padding: 10px;			
}

＆＃13;

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<button id="createData">Create Data</button>
<div class="container">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是代码。基本上我们将一个索引附加到循环中的每个按钮，然后使用这个唯一索引访问您的数组。只需在控制台中查看，然后单击即可查看结果。

var myData = [
  { 
	'car': 'Ford',
	'color': 'Black',
	'model': 'Figo'			  
  }, { 
	'car': 'Ford',
	'color': 'Red',
	'model': 'Endeavour'			  
  },{ 
	'car': 'Jaguar',
	'color': 'White',
	'model': 'F-Type'			  
  },
];

var i = 0;

$(document).ready(function(){
  $('#createData').click(function(){
	myData.forEach(function(obj){
	  $('.container').append(
		$('<div>').addClass('parent').append(
		  $('<div>').append(
			$('<label>').text('Car: '),
			$('<span>').text(obj.car)
		  ),
		  $('<div>').append(
			$('<br /><label>').text('Model: '),
			$('<span>').text(obj.model)
		  ),
		  $('<br /><button data="'+i+'">').text('Click Me').addClass('getData')
		)
	  )
      i++;
	});
  });			
});

$(document).on('click', '.getData', function(obj){
  var myColor = $(this);
  console.log(myData[obj.currentTarget.attributes[0].nodeValue]);
});

.parent {
  border: 1px solid lightgrey;
  border-radius: 5px;
  background-color: skyblue;
  height: 100px;
  margin-top: 5px;
  padding: 10px;			
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="createData">Create Data</button>
<div class="container">

</div>

这是你想要的还是我在这里弄错了？