我是一名学生，需要我的项目。我正在建立一个房地产网站，我已经提取了房地产数据并对其进行了过滤，因此当用户登陆索引页面时，他们可以选择使用下拉搜索栏按城市或州选择租金或购买。一旦用户做出特定选择，下拉搜索栏将被隐藏，结果将以卡片视图格式显示。包括照片、地址和价格。这是一个名为 listings 的数组，每个索引都有 div 元素。我现在想自己弄清楚的是，我希望用户点击卡片，因此需要一个事件监听器，以及卡片中的所有信息（房子) 和更多详细信息将在其他页面中打开。所以这就像用户单击以单独查看有关房屋的更多详细信息。一旦使用相同的 api 调用单击它，我如何让列表 div 中的每个元素显示在另一个页面上？我将如何做到这一点，你能帮助我吗？下面是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/landing.css"
<title>FRONT END PAGE</title>
</head>
<body>
<header>
<nav>
<li>Buy</li>
<li>Sell</li>
<li>Rent</li>
<li>Help</li>
</nav>
</header>
<div id="search">
<h1> Find your dream home</h1>
<form>
<!-- <fieldset>
<label for="">Streat Address</label>
<input type="text" id="inputAddress" placeholder="Enter addresse">
</fieldset> -->
<fieldset>
<label for="">City</label>
<input type="text" id="inputCity" placeholder="Enter City">
</fieldset>
<fieldset>
<label for="">State</label>
<input type="text" id="inputState" maxLength="2" placeholder="Enter State">
</fieldset>
<fieldset>
<select name="" id="filterOption">
<option value="buy">Buy</option>
<option value="rent">Rent</option>
</select>
</fieldset>
<!-- <fieldset>
<label for="">Zip Code</label>
<input type="text" id="inputZipcode" placeholder="Enter Zipcode">
</fieldset> -->
<button type="submit" id="submitBtn">Search</button>
</form>
</div>
<h2 id="listingHeader"></h2>
<div id="listings">
</div>
<script src="js/landing.js"> </script>
</body>
</html>
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
let submitBtn = document.querySelector("#submitBtn");
submitBtn.addEventListener("click",(event)=>{
event.preventDefault();
let cityValue = document.querySelector("#inputCity").value;
let stateValue = document.querySelector("#inputState").value;
console.log("data:", cityValue, stateValue)
let inputState = document.querySelector("#inputState").value
let inputCity = document.querySelector("#inputCity").value
let optionFilter = document.querySelector("#filterOption").value;
let state = inputState.trim();
let city = inputCity.trim();
let dropdownChoice = optionFilter;
//let dropdownsecondchoice = "rent"
let query = "https://realty-mole-property-api.p.rapidapi.com/";
switch (dropdownChoice){
case "buy": query += "saleListings"; break;
case "rent": query += "rentalListings"; break;
}
query += "?" + "city=" + city + "&limit=20" ;
fetch(query,{
method: 'GET',
headers: {
'X-RapidAPI-Key': '073e8d9172mshdb82d5e4353d0c8p10487bjsnc51b2de1e97b',
'X-RapidAPI-Host': 'realty-mole-property-api.p.rapidapi.com'
}
})
.then(response => response.json())
.then(data => {
document.querySelector("#search").style.display = "none";
//add listings to the page
data.forEach((d, i)=>{
let listingsEl = document.querySelector("#listings")
document.querySelector("#listingHeader").textContent = dropdownChoice;
let imgEl = document.createElement("img");
imgEl.setAttribute("src", "./images/" + i + ".jpg");
console.log(imgEl);
let divEl = document.createElement("div");
let h4El = document.createElement("h4");
h4El.textContent = (i+1) + ". " + d.formattedAddress;
let pEl = document.createElement("p");
pEl.textContent = "$" + numberWithCommas(d.price);
divEl.appendChild(imgEl);
divEl.appendChild(h4El);
divEl.appendChild(pEl)
listingsEl.appendChild(divEl);
})
console.log(data)
})
.catch(err => console.error(err));
})