通过点击动态按钮来抓取相应的对象

Question

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

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

你能帮我解决吗？

下面的代码：

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

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

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

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

Answer 1

这里是代码。基本上，我们为循环中的每个按钮添加索引，然后使用此唯一索引访问阵列。只需点击查看结果即可在控制台中查看。

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

 
var i = 0; 
 

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

 
$(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; \t \t \t 
 
}

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

这是你想要的东西或我得到的东西错在这里？