点击动态渲染项目[JS/JQuery]

-1

我正在使用for循环渲染图像和名称的产品列表样式网格。点击动态渲染项目[JS/JQuery]

这是工作，但希望我发生下一个是用户点击其中一张图片，并且它可以将其链接到一个新的页面，其动态填充特定对象的细节，他们只是点击了。

这样做的最好方法是什么？

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>

来源

2017-03-18 Penrose865

-1

所有你需要做的是供应onclick事件处理到父<div>并通过this作为参数给它。然后当onclick函数（populateData）被调用时，你有触发onclick事件的元素。然后，它是解析你需要的数据的一个简单的事情。我希望它有帮助。

P.S.我冒昧地从div元素中删除id，因为您不能拥有多个具有相同ID的元素。另外，为了简单起见，我将区域单独打包为div。

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>

来源

2017-03-18 13:43:20 mp77

非常感谢 - 这个作品真的很好。只有一个问题 - 我将如何动态更新网址？ – Penrose865

你在说哪个网址？ Img的来源？详细解释你的用例。 – mp77

道歉 - 应该更清楚： for循环创建一个图像网格，其URL以mainpage.html结尾一旦你点击其中一个图像，调用populateData函数来填充“linkPage”，但我希望这是一个新的网页与该项目的网页，而不是呈现在mainpage.html – Penrose865

你只需要一个<a />元素

<a href='/insert-some-link'> 
<img class='img-responsive' src='" + items[i].pic + "'> 
</a>

来源

2017-03-18 12:23:50 Tacud

我没有收到包裹<img />元素你如何处理它的新的一页，但如果一切都在同一页面，那么这个代码将工作。在代码片段下面运行。

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' onclick='imageClicked(this)' data-name='"+items[i].name+"' data-region='"+items[i].region+"' data-about='"+items[i].about+"' src='" + items[i].pic + "'>\ 
 
     <span class='info'><div class='proj-title'>" + items[i].name + "</div>" + items[i].region + "</span>\ 
 
    </div>\ 
 
    "); 
 
} 
 

 

 

 

 
function imageClicked(c){ 
 
    $('#linkPage').empty(); 
 
    $("#linkPage").append("\ 
 
    <div class='row'>\ 
 
     <div class='col-md-4'>\ 
 
     <h3>"+$(c).data('name')+"</h3>\ 
 
     <h5>"+$(c).data('region')+"</h5>\ 
 
     <p>"+$(c).data('about')+"</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> 
 

 
<div class="container" id="linkPage">hi</div>

来源

2017-03-18 12:24:35 Kanan

点击动态渲染项目[JS/JQuery]

回答

相关问题