我正在為個人項目做一個網(wǎng)站，但我陷入了困境。我有一個包含產(chǎn)品列表的頁面，每個產(chǎn)品都有自己的按鈕，單擊該按鈕時必須鏈接到另一個頁面，用戶可以在其中閱讀有關(guān)該產(chǎn)品的更多信息。對于具有相同布局的所有產(chǎn)品，第二頁都是固定的。那么我怎樣才能讓每個按鈕發(fā)送到這個頁面并告訴他加載指定產(chǎn)品的信息呢？例如，想象一下亞馬遜，您有產(chǎn)品列表，當您單擊其中一個產(chǎn)品時，您將重新發(fā)送到該產(chǎn)品的頁面以閱讀有關(guān)該產(chǎn)品的所有信息；并且所有的產(chǎn)品都有相同的頁面，只有您所選擇的指定產(chǎn)品的信息發(fā)生了變化。這是 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 加載數(shù)據(jù)）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 回答
達令說
TA貢獻1821條經(jīng)驗 獲得超6個贊
嘗試這個：
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>
- 1 回答
- 0 關(guān)注
- 137 瀏覽
添加回答
舉報
0/150
提交
取消