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

时间：2020-04-01 21:37:42

标签： javascript jquery html json ajax

我正在尝试通过openDetail函数一次显示一张卡的更多详细信息。点击卡片后，如何将其显示在窗口中？现在，我收到一个错误消息，该函数未在HTMLButtonElement.onclick上定义。但是它会将正确的ID传递给了click。我在下面复制了我的问题。 

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>

2 个答案:

答案 0 :(得分：1)

这是可能发生的，因为在DOM加载后插入了openDetails，对此我不确定。 因此，您可以在每个称为.res-entry

的元素上使用“ .on” 

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", "div.res-entry" , function(ev) {
            const id = this.getAttribute('data-id');
            // Then do your request
            openDetails(ev, id);
        });
      }
    });
  });
  
  

  function openDetails(ev, id) {
    //This is for crossbrowser compatibility
    (ev || event).preventDefault();
    
    console.log(id);
    //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>

答案 1 :(得分：1)

您正在动态添加onclick，这将无法正常工作。您需要为.on类的document添加一个.res-entry侦听器：

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

相关问题
最新问题