多个元素的 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"
}
千万里不及你1回答
-
达令说
尝试这个：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>
随时随地看视频慕课网APP
相关分类
Html5