将图像ID-数组索引-从JSON传递到模态 [英] Pass Image ID - Array Index - to Modal from JSON

问题描述

我有使用JSON数组和jQuery .append从mySQL数据库动态创建3列图像网格的代码.如何将.append使用href创建的<div>中每个图像的数据库$row ID(数组索引)传递给模态?我正在使用AJAX语句调用/构建模式.

I have code that's dynamically creating a 3 column image grid from a mySQL database using a JSON array and jQuery .append. How would I pass the database $row ID (array index) of each image in the <div> created by the .append using an href to a modal? I'm calling/building the modal with an AJAX statement.

下面的行是从完整的$.getJSON语句开始的.我相信我可以在href中传递ID，但是我不确定在哪里或如何?

The line below is from the full $.getJSON statement further down. I believe I can pass the ID in the href but I'm not sure where or how?

// These lines generate the clickable grid images
<a href="equipment.php?id=' + data.Surfboards[row].Surfboard.id + '">
<a href="#dataModal" class="view_data"><img class="photog-headshot" src="images/' + data.Surfboards[row].Surfboard.imageName + '" alt="' + data.Surfboards[row].Surfboard.imageName + '"></a>

JSON解析器-构建图像网格:

//gets the JSON from surfboards.php
$.getJSON("surfboards.php", function (data) {
  //loop through each surfboard in the JSON file and append a <div> with the surfboard information
  $.each(data.Surfboards, function (row) {
      $("#board_table").append(
        '<div class="photog-group clearfix"><figure class="cap-bot"><a href="equipment.php?id=' 
        + data.Surfboards[row].Surfboard.id 
        + '"><a href="#dataModal" class="view_data"><img class="photog-headshot" src="images/'
        + data.Surfboards[row].Surfboard.imageName + '" alt="'
        + data.Surfboards[row].Surfboard.imageName
        + '"></a><figcaption><p>Board Name: ' 
        + data.Surfboards[row].Surfboard.boardName 
        + '<br>Year Shaped: ' 
        + data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
  });
});

图像模式:

<!-- Ajax Database Modal Start -->
      <div id="dataModal" class="modal fade">  
        <div class="modal-dialog">  
          <div class="modal-content">  
            <div class="modal-header">  
              <button type="button" class="close" data-dismiss="modal">&times;</button>  
              <h4 class="modal-title">Surfboard Details</h4>  
            </div>  
            <div class="modal-body" id="surfboard_detail">  
            </div>  
            <div class="modal-footer">  
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
            </div>  
          </div>  
        </div>  
      </div> 

链接到带有工作表示例的页面，并在图像上单击空白模态: Nalu.live/equipment
链接到 github存储库

Link to page with working table example and blank modal on image click: Nalu.live/equipment
Link to github repo

请让我知道是否需要其他信息.

Please let me know if any additional information is needed.

请考虑我仍然是一名学生，并且是Web开发的新手.
谢谢你的帮助.

Please consider that I'm still a student and very new to web development.
Thanks for any help.

推荐答案

我在同学的帮助下解决了这个问题.工作代码在下面链接的GitHub存储库中.请注意，从JSON数据库数据构建图像网格的代码在下面发布，也可以在 scripts/surfboard.js

I solved this with the help of a classmate. Working code is in the GitHub repo at the link below. Please note, the code that builds the image grid from JSON database data is posted below and can also be found in scripts/surfboard.js

我很乐意回答问题(如果可以的话)，或者在需要时通过代码陪伴任何人.

I'm happy to answer questions (if I can) or walk anyone though the code if needed.

Nalu Github存储库

//// From Dylan W. on Discord - Replace in the surfboard.js
$.getJSON("surfboards.php", function (data) {
//loop through each surfboard in the JSON file and append a <div> with the surfboard information
$.each(data.Surfboards, function (row) {
    $("#board_table").append(
      '<div class="equip-content">' + '<div class="photog-group custom-modal clearfix" data-title="'+ data.Surfboards[row].Surfboard.boardName +'" data-image="images/'
      + data.Surfboards[row].Surfboard.imageName +'" data-description="'+
      data.Surfboards[row].Surfboard.caDescription +'"><figure><a href="equipment.php?id=' 
      + data.Surfboards[row].Surfboard.id 
      + '"><a data-target="#surfboardModal" data-toggle="modal"><div class="equip-content-overlay"></div><img class="photog-headshot" src="images/'
      + data.Surfboards[row].Surfboard.imageName + '" alt="'
      + data.Surfboards[row].Surfboard.imageName
      + '"></a><figcaption class="fadeIn-bottom"><h1>' 
      + data.Surfboards[row].Surfboard.boardName + '</h1>'
      + '<hr>'
      + '<p>Year Shaped: ' 
      + data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
    });
  });
});

这篇关于将图像ID-数组索引-从JSON传递到模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！