如果選中復選框，則添加 URL

Question

一旦用戶選擇了過濾器，我就會在頁面上有一個帶有復選框的下拉表單，我需要添加在 URL 中選擇的復選框的值，以便在 CMS 中完美搜索

例如，一個好的 URL 看起來像這樣。

https://www.zyris.io/sort-and-filter?interests-2=Animals%7CArt&ages=Teens%20(13%20to%2017)&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 = "%7CArt";
        console.log("Art is checked");
    }


    if ($('#Histor').is(":checked")) {
        c = "%7CHistory";
        console.log("History is checked");
    }


    if ($('#Scienc').is(":checked")) {
        d = "%7CScience";
        console.log("Science is checked");
    }


    if ($('#Technolog').is(":checked")) {
        e = "%7CTechnology";
        console.log("Technolog is checked");
    }


    if ($('#Today2').is(":checked")) {
        f = "Today";
        console.log("Today is checked");
    }


    if ($('#Next7Days2').is(":checked")) {
        g = "%7CNext%207%20Days";
        console.log("Next 7 Days is checked");
    }


    if ($('#ThisMonth2').is(":checked")) {
        h = "%7CThis%20Month";
        console.log("This Month is checked");
    }


    if ($('#NextMonth2').is(":checked")) {
        i = "%7CNext%20Month";
        console.log("Next Month is checked");
    }


    if ($('#Morning').is(":checked")) {
        j = "%7CMorning";
        console.log("Morning is checked");
    }


    if ($('#Afternoon').is(":checked")) {
        k = "%7CAfternoon";
        console.log("Afternoon is checked");
    }

    if ($('#Evening').is(":checked")) {
        l = "%7CEvening";
        console.log("Evening is checked");
    }


    if ($('#firstPrice').is(":checked")) {
        m = "%240%20—%20%2420";
        console.log("0 — 20 is checked");
    }


    if ($('#secondPrice').is(":checked")) {
        n = "%7C%2420%20—%20%2450";
        console.log("$20 — $50 is checked");
    }


    if ($('#thirdPrice').is(":checked")) {
        o = "%7C%2450%2B";
        console.log("$50+ is checked");
    }


    if ($('#Kids').is(":checked")) {
        p = "%7CKids%20(Up%20to%207)";
        console.log("Kids (Up to 7) is checked");
    }


    if ($('#Tweens').is(":checked")) {
        q = "%7CTweens%20(8%20to%2012)";
        console.log("Tweens (8 to 12) is checked");
    }


    if ($('#Teens').is(":checked")) {
        r = "%7CTeens%20(13%20to%2017)";
        console.log("Teens (13 to 17) is checked");
    }



    if ($('#Adults').is(":checked")) {
        s = "Adults%20(18%2B)";
        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 '&times= &days-2='
    m + n + o + p '                                       
    setTimeout(function() {
        window.location.href = url;
    }, 2000);



}

Answer 1

使用數組而不是許多不同的變量。 然后你可以在創建 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=${times_param}&interests-2=${interests_param}`;

Answer 2

做了幾個樣品，你必須填寫其余的。 此代碼應該適用於任意數量的復選框。 除非添加新的“類別”，否則不必更改代碼。

 $(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> &nbsp; <input type="checkbox" id="Art" V="Art" class="I" /> <label for="Art">Art</label> &nbsp; <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> &nbsp; <input type="checkbox" id="Next7Days" V="Next 7 Days" class="A" /> <label for="Next7Days">Next 7 Days</label> &nbsp; <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來保存要包含在查詢字符串中的值。

需要進行一些邊界檢查以防止出現https://x.com?&ages=...或尾隨| ，即使它們可能大部分時間都在工作。