为什么我的搜索栏不起作用?Javascript-Web

Question

我正在创建一个房地产web应用程序。我正要完成它，但我被最后一件事卡住了。我在主页上添加了一个搜索栏，让用户根据城市、租金/销售额、最小房间/最大房间、最小价格和最大价格过滤房产。我想知道为什么搜索栏不起作用？这是我的搜索栏：

<!-- Search Section -->
<form class="col s8 l1" onsubmit="filteredPrices(li)">
<div class="row">
<div class="input-field col s4 l2">
<select class="all-cities">
<option value="">Choose...</option>
<option value="1">Adana</option>
<option value="2">Adıyaman</option>
<option value="3">Afyonkarahisar</option>
<option value="4">Ağrı</option>
</select>
</div>
<div class="input-field col s4 l2">
<select class="rent-sale" >
<option value="0">Type</option>
<option value="Rent">Rent</option>
<option value="Sale">Sale</option>
</select>
</div>
<div class="input-field col s5 l2">
<select class="min-rooms">
<option value="0">Min Rooms</option>
<option value="1">1</option>  
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="input-field col s5 l2">
<select class="max-rooms">
<option value="0">Max Rooms</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="input-field col s4 l2">
<input type="text" id="min" placeholder="Min price $">
</div>
<div class="input-field col s4 l2">
<input type="text" id="max" placeholder="Max price $">
</div> 
</div>
<button class="btn waves-effect indigo right" type="submit">Search
<i class="material-icons right">send</i>
</button>
</form><!-- ./Search Section -->

这里是我将云消防商店的属性添加到主页的地方：

const setupProp = data => {
let html = '';
data.forEach(doc => {
const info = doc.data();
let li = `
<div class="col s12 l4 items">
<div class="card" style="height: 407px;">
<div class="card-image">
<a href="property.html?${doc.id}">
<img src="${info.image[0]}" style="height: 228px;"></a>
<a class="btn-floating halfway-fab waves-effect waves-light red center status">${info.type}</a>
</div>
<div class="card-content">
<span><b class="house-title">${info.title}</b></span><br>
<span><b class="blue-text price">${info.price}</b> &#36;</span><br>
<span class="material-icons blue-text">room</span>
<span><b class="city">${info.city}</b></span><br>
<span class="material-icons blue-text">single_bed</span>
<span><b class="rooms">${info.rooms}</b> rooms</span>
</div>
</div>
</div>
`;
filteredPrices(li)
html += li
showingProp.innerHTML = html; 
})
}

最后是我的js搜索代码：

const filteredPrices = li => {
const searchMin = Number(document.getElementById('min').value); // Min price search tap
const searchMax = Number(document.getElementById('max').value); // Max price search tap
const rentSale = document.querySelector('.rent-sale').value; // Rent/Sale search tap
const allCities = document.querySelector('.all-cities').value; // City search tap
const minRooms = document.querySelector('.min-rooms').value; // Min rooms search tap
const maxRooms = document.querySelector('.max-rooms').value; // Max rooms search tap
const str = li;
const temp = document.createElement('div');
temp.innerHTML = str;
// console.log(temp)
const items = temp.querySelectorAll('.items');
items.forEach(item => {
const price = Number(item.querySelector('.price').textContent);
const status = item.querySelector('.status').textContent;
const city = item.querySelector('.city').textContent;
const rooms = Number(item.querySelector('.rooms').textContent);
if (price < searchMin || price > searchMax || rentSale !== status || allCities !== city
|| rooms < minRooms || rooms > maxRooms) {
item.style.display = 'none';
// document.querySelector('.error').style.display = "block";
} else
item.style.display = 'block';
})            
}

Answer 1

在app.js中，您在有限的作用域中声明li，您在setupProp((中声明它，因此该变量仅对setupPro((作用域有效。在setupProp((之外和任何其他函数之外声明它，这样该变量就可以全局可见。玩得高兴MDN let附言：下次不要忘记知道它给你的错误，否则还有更多的工作要做，通过通知确切的错误，问题就有限了！app.js代码：

const loggedOutLinks = document.querySelectorAll('.logged-out');
const loggedInLinks = document.querySelectorAll('.logged-in');
const showingProp = document.querySelector('.showing-prop');
const propShow = document.querySelector('.all-properties');
const setupUI = (user) => {
if (user) {
loggedInLinks.forEach(item => item.style.display = 'block');
loggedOutLinks.forEach(item => item.style.display = 'none');
} else {
loggedInLinks.forEach(item => item.style.display = 'none');
loggedOutLinks.forEach(item => item.style.display = 'block');
}
}
let li; //DECLARE li AS GLOBAL, NOT LOCAL INSIDE A FUNCTION
// Displaying the properties to the HomePage
const setupProp = data => {
let html = '';
data.forEach(doc => {
const info = doc.data();
li = `
<div class="col s12 l4 items">
<div class="card" style="height: 407px;">
<div class="card-image">
<a href="property.html?${doc.id}">
<img src="${info.image[0]}" style="height: 228px;"></a>
<a class="btn-floating halfway-fab waves-effect waves-light red center status">${info.type}</a>
</div>
<div class="card-content">
<span><b class="house-title">${info.title}</b></span><br>
<span><b class="blue-text price">${info.price}</b> &#36;</span><br>
<span class="material-icons blue-text">room</span>
<span><b class="city">${info.city}</b></span><br>
<span class="material-icons blue-text">single_bed</span>
<span><b class="rooms">${info.rooms}</b> rooms</span>
</div>
</div>
</div>
`;
filteredPrices(li)
html += li
showingProp.innerHTML = html; 
})
}

// Displaying the properties to the Properties Page(Subpage)
const setupSub = data => {
const id = window.location.href.split('?')[1];
data.forEach(doc => {
if(doc.id === id) {
let info = doc.data();
const images = info.image.map(img => {
return `
<a href="#" class="carousel-item">
<img src=${img} alt="istanbul"  style="height: 390px;">
</a>
`;
});
let html = `
<div class="row" >
<div class="col l6 s12 m12">
<div class="carousel carousel-slider" data-indicators ="true" style="border-radius: 5px;">
${images.join('')}
</div>
<div class="btn indigo waves-affect prev">Prev</div>
<div class="btn indigo waves-affect right next">Next</div>
</div>
<div class="col l6 s12 m12">
<div class="card" style="height: 357px; border-radius: 5px; background-color: #f9f9f9; padding: 10px;">
<h5 class="center">${info.title}</h5><br><br>
<span style="font-weight: bold;"><span class="blue-text">Price:</span> ${info.price} &#36;</span><br><br>
<span><i class="material-icons blue-text">room</i> Located in ${info.city}.</span><br><br>
<span><i class="material-icons blue-text">single_bed</i> Total Rooms ${info.rooms}.</span><br><br>
</div>
</div>
</div>
`;
// To activate the image slider (Materialize css)
$(document).ready(function(){
$('.carousel').carousel();
// function for next slide
$('.next').click(function(){
$('.carousel').carousel('next');
});
// function for prev slide
$('.prev').click(function(){
$('.carousel').carousel('prev');
});
});

propShow.innerHTML = html;
}
})
}