javascript - 单击打开卡以显示更多详细信息

Question

我尝试使用 openDetail 函数一次显示一张卡的更多详细信息。单击卡片后，如何让该详细信息显示在窗口中？现在我收到一个错误，指出 HTMLButtonElement.onclick 中未定义函数。但它正在将正确的 id 传递给单击。我在下面复制了我的问题。

const formatAuthors = (authors) => {
  return authors.map(author => author.person).join(', ') || 'Anonymous';
};

$(() => {
  const url = "https://data.azgs.arizona.edu/api/v1/metadata";

  $('.destinations-form').on('submit', function(e) {
    e.preventDefault();
    let searchstring = $('input[type="text"]').val();
    let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;

    $.ajax({
      type: 'GET',
      url: requestUrl,
      success: function(res) {
        //Create a button to see more info, or add an click event handler for the whole .res-entry div
        //Change item.metadata.id for whatever property contains the ID
        let repo = res.data.map(item =>
          `<div class="res-entry" href="#" onclick="openDetails(${item.collection_id},event)">
					<div class="res-entry-title">${item.metadata.title}</div>
					<div class="res-entry-author">${formatAuthors(item.metadata.authors)}</div>         
					<div class="res-entry-series">${item.metadata.series}</div>
					<div class="res-entry-download">
					  <a href="${item.links[0].href}">Download</a>
					</div>
				  </div>`);

        $("#results").empty().append(repo); // Empty previous...
      }
    });
  });

  function openDetails(id, ev) {
    //This is for crossbrowser compatibility
    (ev || event).preventDefault();
    //Fetch the item's details (replace detailsRequestUrl for whatever URL can return the contents)
    $.get({
      url: "https://data.azgs.arizona.edu/api/v1/metadata?collection_id=",
      data: {
        id: id
      },
      success: function(res) {
        var details = $("#details");
        //Build the HTML
        details.html(res.data.map(item =>
          `....`));
        //And open the popup
        details.show().fadeTo(200, 1);
      }
    });
  }

})

#results {
  margin-top: 1em;
}

.res-entry {
  border: thin solid grey;
  margin: 0.667em;
  padding: 0.5em;
}

.res-entry .res-entry-title {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.res-entry .res-entry-author {
  font-size: 0.8em;
  font-style: italic;
  margin-bottom: 0.25em;
}

.res-entry .res-entry-author:before {
  content: 'By: ';
}

.res-entry .res-entry-series {
  font-size: 0.9em;
}

.res-entry .res-entry-download {
  margin-top: 0.5em;
}

.res-entry .res-entry-download a {
  display: block;
  text-align: right;
  /* If you want it on the right */
}

.res-entry .res-entry-download a button {
  border: thin solid grey;
  background: #FFF;
}

.res-entry .res-entry-download a button:hover {
  border: thin solid grey;
  background: #EE7;
  cursor: pointer;
}

#details {
  display: none;
  position: fixed;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="destinations-form" role="search">
  <div class="input-line">
    <input id="searchForm" type="text" class="form-input check-value" placeholder="Search Documents" />
    <button type="submit" class="form-submit btn btn-special">Search</button>
  </div>
</form>
<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-24">
        <div class="boat-box">
          <div id="results"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="grid">
      <div class="col-md-18 col-md-30 center">
        <div id="details"></div>
      </div>
    </div>
  </div>
</section>

Answer 1

您正在动态添加onclick，但这是行不通的。您需要为 .res-entry 类的 document 添加一个 .on 监听器:

$(document).on("click", ".res-entry", e => {    
    openDetails($(e.target).data("id"), e)
})

检查下面的代码:

const formatAuthors = (authors) => {
  return authors.map(author => author.person).join(', ') || 'Anonymous';
};

$(() => {
  const url = "https://data.azgs.arizona.edu/api/v1/metadata";

  $('.destinations-form').on('submit', function(e) {
    e.preventDefault();
    let searchstring = $('input[type="text"]').val();
    let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;

    $.ajax({
      type: 'GET',
      url: requestUrl,
      success: function(res) {
        //Create a button to see more info, or add an click event handler for the whole .res-entry div
        //Change item.metadata.id for whatever property contains the ID
        let repo = res.data.map(item =>
          `<div class="res-entry" href="#" data-id="${item.collection_id}">
					<div class="res-entry-title">${item.metadata.title}</div>
					<div class="res-entry-author">${formatAuthors(item.metadata.authors)}</div>         
					<div class="res-entry-series">${item.metadata.series}</div>
					<div class="res-entry-download">
					  <a href="${item.links[0].href}">Download</a>
					</div>
				  </div>`);

        $("#results").empty().append(repo); // Empty previous...
      }
    });
  });


  $(document).on("click", ".res-entry", e => {    
    openDetails($(e.target).data("id"), e)
  })

  function openDetails(id, ev) {
    //This is for crossbrowser compatibility
    (ev || event).preventDefault();
    //Fetch the item's details (replace detailsRequestUrl for whatever URL can return the contents)
    $.get({
      url: "https://data.azgs.arizona.edu/api/v1/metadata",
      data: {
        collection_id: id
      },
      success: function(res) {
        console.log(res)
        /*var details = $("#details");
        //Build the HTML
        details.html(res.data.map(item =>
          `....`));
        //And open the popup
        details.show().fadeTo(200, 1);*/
      }
    });
  }

})

#results {
  margin-top: 1em;
}

.res-entry {
  border: thin solid grey;
  margin: 0.667em;
  padding: 0.5em;
}

.res-entry .res-entry-title {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.res-entry .res-entry-author {
  font-size: 0.8em;
  font-style: italic;
  margin-bottom: 0.25em;
}

.res-entry .res-entry-author:before {
  content: 'By: ';
}

.res-entry .res-entry-series {
  font-size: 0.9em;
}

.res-entry .res-entry-download {
  margin-top: 0.5em;
}

.res-entry .res-entry-download a {
  display: block;
  text-align: right;
  /* If you want it on the right */
}

.res-entry .res-entry-download a button {
  border: thin solid grey;
  background: #FFF;
}

.res-entry .res-entry-download a button:hover {
  border: thin solid grey;
  background: #EE7;
  cursor: pointer;
}

#details {
  display: none;
  position: fixed;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="destinations-form" role="search">
  <div class="input-line">
    <input id="searchForm" type="text" class="form-input check-value" placeholder="Search Documents" />
    <button type="submit" class="form-submit btn btn-special">Search</button>
  </div>
</form>
<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-24">
        <div class="boat-box">
          <div id="results"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="grid">
      <div class="col-md-18 col-md-30 center">
        <div id="details"></div>
      </div>
    </div>
  </div>
</section>