如何在Javascript的Where()方法中放入变量？
如何在Javascript的Where()方法中放入变量？
提问于 2020-04-29 15:31:33
很抱歉问这个问题，因为我是这个领域的新手。所以，我目前正在为我的网站使用Firebase Firestore，在那里从Firebase获取文档的通常方法是完美的。但是，当我做一个搜索功能时，我必须通过where('field name in Firebase','equations like "=", ">",">=", etc.', 'parameter')从Firebase中过滤文档。我的问题是，我想从搜索栏中放一个值，我称之为source。在使用toLowerCase()转换source的值之后，我想将变量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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-29 15:37:48
由于source是一个变量，因此您需要执行以下操作：
source = target1.value;
source = source.toLowerCase();
db.collection('Product').where('name','>=', source).where('name','<=', source + '\uf8ff').onSnapshot(snapshot =>{页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61496435
复制相关文章
相似问题
腾讯云开发者
