一旦用戶選擇了過濾器，我就會在頁面上有一個帶有復選框的下拉表單，我需要添加在 URL 中選擇的復選框的值，以便在 CMS 中完美搜索
例如，一個好的 URL 看起來像這樣。
https://www.zyris.io/sort-and-filter?interests-2=Animals|Art&ages=Teens (13 to 17)&days-2=Today
我寫了它的代碼。但它也將變數添加為未選擇的 null，因此無法使用該 URL 進行搜索。
它的任何解決方案，這樣我就可以只添加那些被選擇的變數。
這是我的 JavaScript 代碼：
document.getElementById("search").onclick = function formJS() {
var a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, url = null;
if ($('#Animal').is(":checked")) {
a = "Animals";
console.log("Animals is checked");
}
if ($('#Ar').is(":checked")) {
b = "|Art";
console.log("Art is checked");
}
if ($('#Histor').is(":checked")) {
c = "|History";
console.log("History is checked");
}
if ($('#Scienc').is(":checked")) {
d = "|Science";
console.log("Science is checked");
}
if ($('#Technolog').is(":checked")) {
e = "|Technology";
console.log("Technolog is checked");
}
if ($('#Today2').is(":checked")) {
f = "Today";
console.log("Today is checked");
}
if ($('#Next7Days2').is(":checked")) {
g = "|Next 7 Days";
console.log("Next 7 Days is checked");
}
if ($('#ThisMonth2').is(":checked")) {
h = "|This Month";
console.log("This Month is checked");
}
if ($('#NextMonth2').is(":checked")) {
i = "|Next Month";
console.log("Next Month is checked");
}
if ($('#Morning').is(":checked")) {
j = "|Morning";
console.log("Morning is checked");
}
if ($('#Afternoon').is(":checked")) {
k = "|Afternoon";
console.log("Afternoon is checked");
}
if ($('#Evening').is(":checked")) {
l = "|Evening";
console.log("Evening is checked");
}
if ($('#firstPrice').is(":checked")) {
m = "$0 — $20";
console.log("0 — 20 is checked");
}
if ($('#secondPrice').is(":checked")) {
n = "|$20 — $50";
console.log("$20 — $50 is checked");
}
if ($('#thirdPrice').is(":checked")) {
o = "|$50+";
console.log("$50 is checked");
}
if ($('#Kids').is(":checked")) {
p = "|Kids (Up to 7)";
console.log("Kids (Up to 7) is checked");
}
if ($('#Tweens').is(":checked")) {
q = "|Tweens (8 to 12)";
console.log("Tweens (8 to 12) is checked");
}
if ($('#Teens').is(":checked")) {
r = "|Teens (13 to 17)";
console.log("Teens (13 to 17) is checked");
}
if ($('#Adults').is(":checked")) {
s = "Adults (18+)";
console.log("Adults (18 ) is checked");
}
url = 'https://www.zyris.io/sort-and-filter?ages='
e f g h '&interests-2=' a b c d '&prices-2='
i j k l '×= &days-2='
m n o p '
setTimeout(function() {
window.location.href = url;
}, 2000);
}
uj5u.com熱心網友回復：
使用陣列而不是許多不同的變數。然后你可以在創建 URL 時加入陣列。
let interests = [];
if ($('#Animal').is(":checked")) {
interests.push("Animals");
console.log("Animals is checked");
}
if ($('#Ar').is(":checked")) {
interests.push("Art");
console.log("Art is checked");
}
// and so on
let times = [];
if ($('#Today2').is(":checked")) {
times.push("Today");
console.log("Today is checked");
}
// and so on, similarly for prices and ages
let interests_param = encodeURIComponent(interests.join('|'));
let times_param = encodeURIComponent(times.join('|'));
let prices_param = encodeURIComponent(prices.join('|'));
let ages_param = encodeURIComponent(ages.join('|'));
let url = `https://www.zyris.io/sort-and-filter?ages=${ages_param}&prices-2=${prices_param}×=${times_param}&interests-2=${interests_param}`;
uj5u.com熱心網友回復：
做了幾個樣品，你必須填寫其余的。此代碼應該適用于任意數量的復選框。除非添加新的“類別”，否則不必更改代碼。
$(document).ready(()=> {
$("#search").click(()=> {
const interests = $(".I:checked");
let I = interests.length>0 ? "interests=" : "";
for (let i=0; i<interests.length; i ) {
I = interests[i].getAttribute("V") "|";
};
I = I.slice(0, -1); // to prevent trailing |
const ages = $(".A:checked");
let A = ages.length>0 ? "ages=" : "";
for (let i=0; i<ages.length; i ) {
A = ages[i].getAttribute("V") "|";
};
A = A.slice(0, -1);
// Repeat above for categories P & T for prices and times
let url = "https://ww.zyris.io/sort-and-filter?";
let path = I;
path = path ? A ? "&" A : "" : A; // to prevent leading/trailing &'s
$("#raw").text(path);
$("#url").text(encodeURI(url path));
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<p>Interests:
<input type="checkbox" id="Animal" V="Animals" class="I" />
<label for="Animal">Animals</label>
<input type="checkbox" id="Art" V="Art" class="I" />
<label for="Art">Art</label>
<input type="checkbox" id="History" V="History" class="I" />
<label for="History">History</label>
</p>
<p>Ages:
<input type="checkbox" id="Today" V="Today" class="A" />
<label for="Today">Today</label>
<input type="checkbox" id="Next7Days" V="Next 7 Days" class="A" />
<label for="Next7Days">Next 7 Days</label>
<input type="checkbox" id="ThisMonth" V="This Month" class="A" />
<label for="ThisMonth">This Month</label>
</p>
<p>
<button id="search">Search</button><br/>
Raw path: <span id="raw"></span><br/>
Url: <span id="url"></span>
</p>我使用了一個任意屬性V來保存要包含在查詢字串中的值。
There are a few boundary checks needed to prevent situations like https://x.com?&ages=... or trailing |, even though they might work most of the time.
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/311224.html
標籤：javascript 查询 形式 搜索
上一篇：PHP表單不檢查其他輸入