时间戳

首页 > 解决方案 > 多个元素的 JS/Jquery 按钮处理程序

javascript - 多个元素的 JS/Jquery 按钮处理程序

问题描述

我正在为个人项目做一个网站，但我被卡住了。我有一个包含产品列表的页面，每个页面都有自己的按钮，当点击它时，它必须链接到另一个页面，用户可以在其中阅读有关产品的更多信息。这第二页针对所有具有相同布局的产品进行了修复。那么我怎样才能让每个按钮发送到这个页面并告诉他加载指定产品的信息呢？例如，想象一下亚马逊，您有产品列表，当您单击其中一个时，您将重新发送到产品页面以阅读有关它的所有信息；并且所有产品都有相同的页面，只是更改了您正在查看的指定产品的信息。这是html：

<!DOCTYPE HTML>
<html>
   <head>
       <?php 
           include ("top.php");
           include ("common.php");
           include ("projects/get_projects.php");    
       ?>
       <link href="style/explore.css" type="text/css" rel="stylesheet">
       <script type="text/javascript" src="js/script4.js"></script>
   </head>
   <body>
       <?php include ("nav.php");?>
       <div id = "container"></div>
   </body>
</html>

这是我在 js 中所做的（我用 ajax 加载数据）

const data =  [{
    "username": "User1",
    "title": "Applicazione android per gestire le lezioni",
    "descr": "Mi serve una semplice app android per gestire dei corsi universitari. Per maggiori informazioni mandatemi un messaggio",
    "budget": "250\u20ac - 750\u20ac",
    "category": "app",
    "data": "2020-02-25",
    "flag": "Non disponibile"
  },
  {
    "username": "User2",
    "title": "Software per gestire i pagamenti in cassa",
    "descr": "Mi serve un software da installare all'interno dei computer alla cassa di un supermercato per poter gestire i pagamanti. \r\nDeve offrire la possibilit\u00e0 di cancellare un prodotto, inserirne uno manualmente, consentire il pagamento in contanti o col pos, etc.",
    "budget": "1500\u20ac - 3000\u20ac",
    "category": "software",
    "data": "2020-04-16",
    "flag": "Disponibile"
  },
  {
    "username": "User3",
    "title": "Configurazione rete aziendale",
    "descr": "Mi serve un esperto in sistemi per installare una rete aziendale protetta.",
    "budget": "+ 5000\u20ac",
    "category": "sistemi",
    "data": "2020-04-16",
    "flag": "Disponibile"
  },
  {
    "username": "User14",
    "title": "sito web per impresa di costruzioni edili",
    "descr": "Mi serve un semplice sito su cui pubblicare tutte le foto dei miei lavori e permetterei ai clienti di contattarmi facilmente via email.",
    "budget": "250\u20ac - 750\u20ac",
    "category": "web",
    "data": "2020-03-25",
    "flag": "Disponibile"
  },
  {
    "username": "User5",
    "title": "Database per azienda di catering",
    "descr": "Mi servirebbe un database per gestire un'azienda di catering.\r\nAll'interno andrebbero inseriti dati di ricette, men\u00f9, cuochi, eventi, personale, etc.\r\nBisogna inoltre dotarlo di tutte le funzioni per aggiungere o aggiornare tale elenco",
    "budget": "250\u20ac - 750\u20ac",
    "category": "database",
    "data": "2020-04-16",
    "flag": "Disponibile"
  },
  {
    "username": "User6",
    "title": "Mi serve un esperto per fare un video musicale",
    "descr": "Sto per far uscire il mio nuovo pezzo musicale e devo realizzare il video della canzone per poterla postare su YouTube.\r\nMi serve quindi un esperto che sappia montare un video in modo professionale.",
    "budget": "3000\u20ac - 5000\u20ac",
    "category": "altro",
    "data": "2020-04-16",
    "flag": "Disponibile"
  }
]


function showInfo(data) {
  var htmlString = "";
  var containerPrj = document.getElementById("container");

  if (data.length == 0) {
    htmlString = "<span id = " + "message>" + "Non è stato trovato alcun progetto" + "</span>";
    containerPrj.insertAdjacentHTML('beforeend', htmlString);
  } else {

    for (i = 0; i < data.length; i++) {
      htmlString = "<div class = " + "project>" +
        "<span>" + data[i].username + "</span>" +
        data[i].title + " | " +
        data[i].category + " | " +
        data[i].budget + " | " +
        data[i].data + " | " +
        data[i].flag + " | " +
        "<button id =" + "details>" + "Dettagli" + "</button>" +
        //each of this button must link to a page where i can see more information about this specified button that represent 1 specified product
        '</div>';
      containerPrj.insertAdjacentHTML('beforeend', htmlString);
    }
  }
}

 showInfo(data)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

标签： javascripthtmljqueryajax

解决方案

尝试这个：

const data = [{ "username": "User1", "title": "Applicazione android per gestire le lezioni", "descr": "Mi serve una semplice app android per gestire dei corsi universitari. Per maggiori informazioni mandatemi un messaggio", "budget": "250\u20ac - 750\u20ac", "category": "app", "data": "2020-02-25", "flag": "Non disponibile" }, { "username": "User2", "title": "Software per gestire i pagamenti in cassa", "descr": "Mi serve un software da installare all'interno dei computer alla cassa di un supermercato per poter gestire i pagamanti. \r\nDeve offrire la possibilit\u00e0 di cancellare un prodotto, inserirne uno manualmente, consentire il pagamento in contanti o col pos, etc.", "budget": "1500\u20ac - 3000\u20ac", "category": "software", "data": "2020-04-16", "flag": "Disponibile" }, { "username": "User3", "title": "Configurazione rete aziendale", "descr": "Mi serve un esperto in sistemi per installare una rete aziendale protetta.", "budget": "+ 5000\u20ac", "category": "sistemi", "data": "2020-04-16", "flag": "Disponibile" }, { "username": "User14", "title": "sito web per impresa di costruzioni edili", "descr": "Mi serve un semplice sito su cui pubblicare tutte le foto dei miei lavori e permetterei ai clienti di contattarmi facilmente via email.", "budget": "250\u20ac - 750\u20ac", "category": "web", "data": "2020-03-25", "flag": "Disponibile" }, { "username": "User5", "title": "Database per azienda di catering", "descr": "Mi servirebbe un database per gestire un'azienda di catering.\r\nAll'interno andrebbero inseriti dati di ricette, men\u00f9, cuochi, eventi, personale, etc.\r\nBisogna inoltre dotarlo di tutte le funzioni per aggiungere o aggiornare tale elenco", "budget": "250\u20ac - 750\u20ac", "category": "database", "data": "2020-04-16", "flag": "Disponibile" }, { "username": "User6", "title": "Mi serve un esperto per fare un video musicale", "descr": "Sto per far uscire il mio nuovo pezzo musicale e devo realizzare il video della canzone per poterla postare su YouTube.\r\nMi serve quindi un esperto che sappia montare un video in modo professionale.", "budget": "3000\u20ac - 5000\u20ac", "category": "altro", "data": "2020-04-16", "flag": "Disponibile" } ]


function showInfo(data) {
  let html = [];
  const $containerPrj = $("#container");

  if (data.length == 0) {
    $containerPrj.html('<span id="message">Non è stato trovato alcun progetto</span>')
    return;
  }
  data.forEach(function(ele) {
    html.push('<div class="project">')
    html.push('<span>' + ele.username + '</span>');
    html.push(ele.title + " | " + ele.category + " | " + ele.budget + " | " + ele.data + " | " + ele.flag + " | ");
    html.push('<button class="details" data-username="'+ele.username+'">Dettagli</button>');
    html.push('</div>');
  })
  $containerPrj.append(html.join(""))
}
$("#container").on("click",".details",function() {
  // this could be ajax too !
  console.log($(this).data("username"));
  // or window.open("newpage.html?username="+$(this).data("username"))
})

showInfo(data)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

推荐阅读