在单击 [JS/JQuery] 时动态呈现项目

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

你只需要用一个<a />元素包装<img />元素

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

Answer 2

我不

明白你如何处理新页面，但如果所有内容都在同一页面中，那么这段代码将起作用。运行下面的代码片段。

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>

Answer 3

您

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

附言我冒昧地从元素中删除id div因为您不能拥有具有相同 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>