时间戳

首页 > 解决方案 > 如何在 Javascript 中的 Where() 方法中放置变量？

javascript - 如何在 Javascript 中的 Where() 方法中放置变量？

问题描述

对不起这个问题，因为我是这个领域的新手。因此，我目前正在为我的网站使用 Firebase Firestore，从 Firebase 获取文档的常用方法运行良好。但是，当我创建搜索功能时，我必须通过where('field name in Firebase','equations like "=", ">",">=", etc.', 'parameter'). 我的问题是我想从我调用的搜索栏中输入一个值source。转换sourcewith的值后toLowerCase()，我想将变量分配给source函数内部的参数where()。但是，它不能很好地工作，因为在我看过的一些教程中，他们使用字符串数据类型并将其放在where()参数中。谁能帮我解决这个问题？顺便说一句，我试着输入一些string在参数内部，它运行良好。我会将数据保留在 Firebase 中，以防您想弄乱它。谢谢你。

target1.addEventListener('search', search);
function search(){
    source = target1.value;
    source = source.toLowerCase();
    db.collection('Product').where('name','>=', 'source').where('name','<=', 'source' + '\uf8ff').onSnapshot(snapshot =>{
    let changes = snapshot.docChanges();
    changes.forEach(change =>{
        if (change.type == 'added'){
            insertDoc(change.doc);
        }
        else if (change.type == 'removed'){
            let box = docTarget.querySelector('[data-id=' + change.doc.id +']');
            docTarget.removeChild(box); 
        }
    })
})
    
*{
    margin:0;
    padding:0;
    font-family: 'Product Sans';
    box-sizing: border-box;
    font-style: normal;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2), format('woff2');
    max-width: 360px;
    height: auto;

}

body{
    background-color: white;
    background-size: cover;
    max-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.big-container{
    /* overflow: hidden; */
    width: 360px;
    height: auto;
    position: absolute;
    margin-left: 0px;
    top: 0px;
}


.arc{
    position: relative;
    background-color:#E67E22;
    top: 0px;
    text-align: center;
    position: absolute;
    top: 0px;
    width: 360px;
    height: 150px;;
    border-radius: 0px 0px 25px 25px;
    transform: translate(0,-5px);
    z-index: 1;
}

.title{
    font-size: 32px;
    color: white;
    text-align: center;
    position: relative;
    top: 27px;
}

.cancel{
    position: relative;
    top:-6px;
    left: 300px;
    z-index: -10;
}

.sorter{
    position: relative;
    top:-6px;
    left:15px;
}

input{
    position: relative;
    width: 312px;
    height: 35px;
    left: -24px;
    top: 47px;
    border:2px solid white;
    border-radius: 10px;
    background: #E67E22;
    outline: none;
    padding-top: 1px;
    padding-right: 15px;
    color: black;
    font-size: 16px;
    padding-left: 15px;
    transition: 0.5s;
    z-index: 10;
}

::placeholder{
    color: white;
}

#wrapper{
    position: relative;
    min-width: 360px;
    min-height: 100px;
    height: auto;
    left: 0px;
    top: 145px;
    background: white;
    border-radius: 12.5px;
    padding: 12px;
    padding-top: 22px;
    display: grid;
    grid-template-columns: repeat(2,157px);
    grid-auto-rows: 95px;
    grid-column-gap: 23px;
    grid-row-gap: 16px;

}

.box{
    width: 157px;
    min-height: 95px;
    max-height: auto;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 12.5px;
    padding-bottom: 5px;
}

.title-box{
    position: relative;
    top: 17px;
    text-align: center;
    font-family: Product Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #E67E22;
    transition: 0.5s;
}

.tc-1{
    position: relative;
    top: 26px;
    left: 33px;
    font-family: Product Sans Light;
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.02em;
    color: #000000;
    transition: 0.5s;
}

.tc-2{
    position: relative;
    top: 26px;
    left: 14px;
    font-family: Product Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.00em;
    color: #000000;
    transition: 0.5s;
}

.tc-3{
    position: relative;
    top: -6px;
    left: 110px;
    font-family: Product Sans Light;
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.02em;
    color: #000000;
    transition: 0.5s;
}

.tc-4{
    position: relative;
    top: -6px;
    left: 88px;
    font-family: Product Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.00em;
    color: #000000;
    transition: 0.5s;
}

.box:hover{
    background: #E67E22;
    transition: ease-in-out 0.5s;
    color: white;
}

.box:hover h4, 
.box:hover p{
    color: white;
    transition: 0.5s;
}

h2{
    width: 157px;
    min-height: 95px;
    max-height: auto;
    overflow: hidden;
    padding: 2px;
    visibility: visible;
    position: absolute;
    top: 22px;
}

.closer{
    visibility: visible;
    position: relative;
    top: -100px;
    left: 135px;
    z-index: 100;
}
<html>
<head>
    <title>SDE Stock | Cari</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-firestore.js"></script>
    <!-- TODO: Add SDKs for Firebase products that you want to use
            https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-analytics.js"></script>
</head>

<body>
    <div class="big-container">
        <span class="navbar">
                <div class="arc">
                    <p class="title">Cari produk</p>
                    <img src="Group 2.svg" alt="" class="cancel">
                    <img src="menu 1.svg" alt="" class="sorter">
                    <input type="search" class="searcher">
                </div>
        </span>
        <div id="wrapper">
                <!-- <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div id="last-element" class="important"></div> -->
        </div>
    </div>
    <script>
        var firebaseConfig = {
            apiKey: "AIzaSyARW1T5mnayv7XVsHnfP_uc0jO-ck11ykw",
            authDomain: "sde-sale-stock.firebaseapp.com",
            databaseURL: "https://sde-sale-stock.firebaseio.com",
            projectId: "sde-sale-stock",
            storageBucket: "sde-sale-stock.appspot.com",
            messagingSenderId: "247739189879",
            appId: "1:247739189879:web:0f809640941c5d3e341472",
            measurementId: "G-VS6QCRD18K"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        firebase.analytics();
        const db = firebase.firestore();

    </script>
    <script src="script.js"></script>
</body>

</html>

标签： javascripthtmlfirebase

解决方案

既然source是一个变量，那么您需要执行以下操作：

source = target1.value;
source = source.toLowerCase();
db.collection('Product').where('name','>=', source).where('name','<=', source + '\uf8ff').onSnapshot(snapshot =>{

推荐阅读