为什么我的搜索栏不起作用？ 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 -->

这是我将Cloud Firestore的属性添加到我的主页的位置：

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（）中声明它，因此该变量仅对setupProp（）范围有效。在setupProp（）外部和任何其他函数外部声明它，因此该变量可以全局可见。玩得开心！MDN let附言下次不要忘了告知它给您的错误，否则，通过通知确切的错误，问题将是有限的，还有很多工作要做！