javascript - 如何正确调用具有输入值条件的函数

问题描述

我最近在一个网站上工作，该网站主要用作各种旅行社可以发布他们的旅行优惠的媒介。

索引页面包含一个功能过滤器区域，用户可以在其中执行基于多个条件的报价搜索。

            <div id="offer-filters">
            <h2>Filter search</h2>
            <div id="filter-bars">
                <ul id="filter-list">
                    <li>
                        <label for="searchagency">Agency</label>
                        <input list="agencies" id="searchagency" name="searchagency"
                            onclick="dataListFromOriginAgency('agencies', 'searchagency')">
                    </li>
                    <datalist id="agencies"></datalist>
                    <li>
                        <label for="searchdepart">Departure</label>
                        <input list="departures" id="searchdepart" name="searchdepart"
                            onclick="dataListFromOriginOffersDeparture('departures', 'searchdepart')">
                    </li>
                    <datalist id="departures"></datalist>
                    <li>
                        <label for="searchdestination">Destination</label>
                        <input list="destinations" id="searchdestination" name="searchdestination"
                            onclick="dataListFromOriginOffersDestination('destinations', 'searchdestination')">
                    </li>
                    <datalist id="destinations"></datalist>
                    <li>
                        <label for="searchpricerangefrom">Price below</label>
                        <input type="number" id="searchpricerangefrom" name="searchpricerangefrom" min="1"
                            max="1000000">
                        <label for="searchpricerangeto">over</label>
                        <input type="number" id="searchpricerangeto" name="searchpricerangeto" min="1"
                            max="1000000">
                    </li>
                    <li>
                        <label for="searchtransport">Transport</label>
                        <input list="transport" id="searchtransport" name="searchtransport"
                            onclick="dataListFromOriginOffersTransportation('transport', 'searchtransport')">
                    </li>
                    <datalist id="transport"></datalist>
                    <li>
                        <label for="searchstartdate">Start date</label>
                        <input type="date" name="searchstartdate" id="searchstartdate"></li>
                    <li>
                        <label for="searchenddate">Return date</label>
                        <input type="date" name="searchenddate" id="searchenddate">
                    </li>
                </ul>
            </div>
            <button class="search-filter">Search</button>
        </div>

关键的想法是，底部的按钮将根据有多少输入包含值来返回函数，也就是说有多少输入不为空。即，用户基于某个机构执行报价搜索，将机构名称传递到第一个输入中，并将目的地输入到第三个输入中。

当我定义一个将根据输入条件返回不同结果的函数时，某些函数将永远不会被调用，因为先前的条件已经评估。

function triggerFuncByScenario() {
if (!(document.querySelector("#searchagency").value === "")) {
    getOffersByName();
}

else if (!(document.querySelector("#searchagency").value === "" && document.querySelector("#searchdestination").value === "")) {
    getOffersByDestinationName();
}

举个例子，第一个函数通常发生在按钮单击时，而第二个函数不起作用，因为条件的第一部分已经被评估，导致第一个函数的不断调用。

是否有任何解决方案可以将每个过滤器组合分配给不同的功能？

这些函数还使用 AJAX 请求来获取数据。

function prepareOffers(type, route, objectJSON) {

var offer = document.getElementsByClassName("offer");

while (offer[0]) {
    offer[0].parentNode.removeChild(offer[0]);
}

while (!(document.getElementById("offers-nav").innerHTML == "")) {
    var nav = document.getElementById("offers-nav");
    nav.innerHTML = "";
}

var httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = function () {

    if (httpRequest.readyState == 4) {
        var response = httpRequest.responseText;
        var respArray = response.split(",");
        var arrayParsed = JSON.parse(respArray);
        for (let i = 0; i < arrayParsed.length; i++) {

            var offer = document.createElement("div");
            offer.className = "offer";
            document.getElementById("offers-list").appendChild(offer);

            var offerFlex = document.createElement("div");
            offerFlex.className = "offer-flex";
            document.getElementsByClassName("offer")[i].appendChild(offerFlex);

            var image = document.createElement("img");
            image.setAttribute("alt", "Image description of an given agency offer destination");
            image.setAttribute("src", ("img/" + arrayParsed[i].destination + ".jpg"));
            image.setAttribute("class", "destination-image");

            var image2 = document.createElement("img");
            image2.setAttribute("alt", "Logo of an agency that provided the offer");
            image2.setAttribute("src", ("img/" + arrayParsed[i].tourism_agency + ".png"));
            image2.setAttribute("class", "agency-logo");


            var markAsFavourite = document.createElement("a");
            markAsFavourite.setAttribute("class", "favourite");
            markAsFavourite.setAttribute("href", "#a");
            markAsFavourite.setAttribute("onclick", "addToFavourites()");
            markAsFavourite.innerHTML = "<i class='fas fa-star'></i> Add to favourites";

            var list = document.createElement("ul");
            document.getElementsByClassName("offer-flex")[i].appendChild(markAsFavourite);
            document.getElementsByClassName("offer-flex")[i].insertBefore(list, markAsFavourite);
            document.getElementsByClassName("offer-flex")[i].insertBefore(image2, list);
            document.getElementsByClassName("offer-flex")[i].insertBefore(image, image2);

            var element1 = list.appendChild(document.createElement("li"));
            element1.setAttribute("class", "destination");

            var element2 = list.appendChild(document.createElement("li"));
            element2.setAttribute("class", "start");

            var element3 = list.appendChild(document.createElement("li"));
            element3.setAttribute("class", "end");

            var element4 = list.appendChild(document.createElement("li"));
            element4.setAttribute("class", "price");

            var element5 = list.appendChild(document.createElement("li"));
            element5.setAttribute("class", "transportation");

            var element6 = list.appendChild(document.createElement("li"));
            element6.setAttribute("class", "more-info");

            document.getElementsByClassName("destination")[i].innerHTML = "Destination: " + arrayParsed[i].destination;

            document.getElementsByClassName("start")[i].innerHTML = "Start date: " + arrayParsed[i].start;

            document.getElementsByClassName("end")[i].innerHTML = "Return date: " + arrayParsed[i].end;

            document.getElementsByClassName("price")[i].innerHTML = "Price: " + arrayParsed[i].price + " €&quot;;

            document.getElementsByClassName("transportation")[i].innerHTML = "Transport: " + arrayParsed[i].transportation;

            document.getElementsByClassName("more-info")[i].innerHTML = "For more info please click <a href='#offers-page' onClick='displayMoreInfo()'>here</a>";

            document.getElementById("offers-count").innerHTML = "Showing " + document.querySelectorAll(".offer").length + " from " + arrayParsed.length + " offer(s):";
        }

        if (arrayParsed.length == 0) {
            var noOffers = document.createElement("h2");
            noOffers.setAttribute("id", "no-offers");
            document.querySelectorAll(".show-offers")[0].insertBefore(noOffers, document.querySelector("#offers-list"));
            document.querySelector("#no-offers").innerHTML = "No offers found!";
        } else {
            var noOffers = document.createElement("h2");
            noOffers.setAttribute("id", "no-offers");
            document.querySelectorAll(".show-offers")[0].insertBefore(noOffers, document.querySelector("#offers-list"));
            document.querySelector("#no-offers").remove();
        }
    }
}

httpRequest.open(type, route, true);

if (!(objectJSON == "" || objectJSON == null)) {
    httpRequest.setRequestHeader("Content-type", "application/json");
    httpRequest.send(objectJSON);
} else {
    httpRequest.send();
}

先感谢您。

标签： javascriptajax

javascript - 如何正确调用具有输入值条件的函数

问题描述

解决方案

推荐阅读