I'm using a for loop to render a product-list style grid of images and names.
This is working, but what I'd like to happen next is for a user to click on one of the images and for it to link them to a new page which is dynamically populated with the details of the specific object they just clicked on.
What's the best way of doing this?
var items = [
{ name: "pencil", region: "UK", pic: "img/pencil.jpg", about: "this is a pencil"},
{ name: "magazine", region: "USA", pic: "img/magazine.jpg", about: "this is a pencil"},
{ name: "camera", region: "EU", pic: "img/camera.jpg", about: "this is a pencil"}
];
for(var i = 0; i < items.length; ++i ) {
$("#mainPage").append("\
<div class='col-md-4'id='workColumn'>\
<img class='img-responsive' src='" + items[i].pic + "'>\
<span class='info'><div class='proj-title'>" + items[i].name + "</div>" + items[i].region + "</span>\
</div>\
");
}
//for appending this info onto the new page
$("#linkPage").append("\
<div class='row'>\
<div class='col-md-4'>\
<h3>//dynamically populate with name of item user has clciked</h3>\
<h5>//dynamically populate with region of item user has clciked</h5>\
<p>//dynamically populate with about of item user has clciked</p>\
</div>\
</div>\
");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="mainPage"></div>
//when user clicks on an image, they're taken here:
<div class="container" id="linkPage"></div>All you need to do is supply onclick event handler to your parent <div> and pass this as argument to it. Then when the onclick function (populateData) is called, you have the element that trigger onclick event. Then, its a simple matter of parsing data that you need. I hope it helped.
P.S. I took the liberty to remove id from div element as you can't have multiple elements with the same id. Also, I wrapped region in seperate div for simplicity.
var items = [
{ name: "pencil", region: "UK", pic: "img/pencil.jpg", about: "this is a pencil"},
{ name: "magazine", region: "USA", pic: "img/magazine.jpg", about: "this is a pencil"},
{ name: "camera", region: "EU", pic: "img/camera.jpg", about: "this is a pencil"}
];
for(var i = 0; i < items.length; ++i ) {
$("#mainPage").append("\
<div class='col-md-4' onclick='populateData(this)'>\
<img class='img-responsive' src='" + items[i].pic + "'>\
<span class='info'><div class='proj-title'>" + items[i].name + "</div>\
<div class='proj-region'> " + items[i].region + "</div></span>\
</div>\
");
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
//this function will be called when user clicks a item
function populateData(item){
$(".container").html("\
<div class='row'>\
<div class='col-md-4'>\
<h3>"+ $(item).find('.info .proj-title').text() +"</h3>\
<h5>"+ $(item).find('.info .proj-region').text() +"</h5>\
<img src=' " + $(item).find('img').attr('src') +" '\>\
<p>"+ $(item).find('img').attr('src') +"</p>\
</div>\
</div>\
");
}
</script>
<div class="row" id="mainPage"></div>
//when user clicks on an image, they're taken here:
<div class="container" id="linkPage"></div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments