Question

我正在使用for循环来渲染图像和名称的产品列表样式网格。

这是有效的，但我接下来想要发生的是用户点击其中一个图像并将其链接到一个新页面，该页面动态填充了他们刚才的特定对象的详细信息点击了。

这样做的最佳方式是什么？

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>

Answer 1

您只需要使用<img />元素

包装<a />元素

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

Answer 2

我没有得到你如何处理新页面，但如果一切都在同一页面，那么这段代码将起作用。在代码段下面运行。

＆＃13;

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>\
  ");

}

＆＃13;

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

＆＃13;

Answer 3

您需要做的就是向您的父onclick提供<div>事件处理程序，并将this作为参数传递给它。然后，当调用onclick函数（populateData）时，您具有触发onclick事件的元素。然后，解决您需要的数据很简单。我希望它有所帮助。

P.S。我冒昧地从id元素中移除div，因为您可以拥有多个具有相同ID的元素。另外，为简单起见，我将 region 包装在单独的div中。

＆＃13;

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>\
  ");
}

＆＃13;

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

＆＃13;

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

3 个答案: