Javascript 单击按钮时，查询字符串缺少最后一个键值对 客观的 用户将通过单击panel.html上的一系列按钮来选择他们想要购买的礼物，这三个选项中的数据将pickOne，pickTwo和pickTwo保存在查询字符串中，并传递给gives.html 在document.ready或window.onload上，查询中的值 字符串被连接并传递给同位素.js过滤器，该过滤器进行排序 基于查询的页面上的礼物 问题 单击最后一个和第三个面板上的“下一步”按钮时，第三个拾取的值未添加到查询字符串中，并且显示为空picktree=“” 如果我粘贴url直接使用查询字符串转到该url， 该页面似乎无法过滤文档上的结果。就绪或 window.onload scripts.js gifts.html

如果在

panel.html

上单击最后一个“下一步”按钮或直接转到该URL，则应运行此脚本

<script>
        $(function(){

            // if (window.location.href.indexOf("?" && "pickOne=." && "pickTwo=." && "pickThree=.") !== -1) {
            if (window.location.href.indexOf("?") !== -1) {

                console.log(window.location.href);

                function getParameterByName(name, url) {
                    if (!url) {
                      url = window.location.href;
                    }
                    name = name.replace(/[\[\]]/g, "\\$&");
                    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                        results = regex.exec(url);
                    if (!results) return null;
                    if (!results[2]) return '';
                    return decodeURIComponent(results[2].replace(/\+/g, " "));
                }

                var paramOne = getParameterByName("pickOne");
                var paramTwo = getParameterByName("pickTwo");
                var paramThree = getParameterByName("pickThree");

                var filter = paramOne+paramTwo+paramThree
                console.log(filter);

                var $grid = $('.gifts').isotope({
                    itemSelector: '.gift',
                    layoutMode: 'masonry',
                    getSortData: {
                        name: '.gift__name',
                        price: '.gift__price parseInt',
                    },
                    sortAscending: {
                        name: true,
                        price: true
                    }
                });

                $grid.isotope({ filter: filter });

                // If your query returns zero results, then make another search
                var filter = $('.gifts').filter(function () {
                    return this.style.display == 'none'
                });

                if (filter.length === 0) {
                    console.log("There are no results");
                }
            }
        });
    </script>

$（函数（）{
//if（window.location.href.indexOf（“？”&&&“pickOne=。”&&“pickTwo=。”&&“pickThree=。”）！=-1）{
if（window.location.href.indexOf（“？”）=-1）{
console.log（window.location.href）；
函数getParameterByName（名称、url）{
如果（！url）{
url=window.location.href；
}
name=name.replace（/[\[\]]/g，\\$&）；
var regex=new RegExp（“[？&]”+name+”（=（[^&#]*）和|#|$），
结果=regex.exec（url）；
如果（！results）返回null；
如果（！results[2]）返回“”；
返回组件（结果[2]。替换（/\+/g，”）；
}
var paramOne=getParameterByName（“pickOne”）；
var paramtow2=getParameterByName（“picktow2”）；
var paramtree=getParameterByName（“pickThree”）；
变量过滤器=参数一+参数二+参数三
控制台日志（过滤器）；
变量$grid=$（'.gifts'）。同位素({
itemSelector:“.gift”，
布局模式：“砌体”，
getSortData：{
名称：'.礼物名称'，
价格：'.gift_uuprice parseInt'，
},
排序：{
姓名：对，
价格：对
}
});
$grid.同位素（{filter:filter}）；
//如果查询返回的结果为零，则进行另一次搜索
变量过滤器=$（'.gifts'）。过滤器（函数（）{
返回this.style.display==“无”
});
如果（filter.length==0）{
log（“没有结果”）；
}
}
});

panel.html

你想花多少钱？
选择下面的选项之一
25美元以下
50美元以下
75美元以下
100美元以下
250美元以下
250美元及以上
以前的

您正在使用var关键字创建新的picktree实例，因此添加到数据中的原始picktree实例永远不会设置值。您需要删除var关键字，如下所示：

if (under25) {
    pickThree = ".Under25";
} else if (under50) {
    pickThree = ".Under50";
} else if (under75) {
    pickThree = ".Under75";
} else if (under100) {
    pickThree = ".Under100";
} else if (under250) {
    pickThree = ".Under250";
} else if (over250) {
    pickThree = ".Over250";
}

---

不幸的是，删除

var

不是解决方案，因为查询字符串仍然为第三个pick生成空值删除

var

会给我一个查询字符串，看起来像

l？pickOne=.GiftsForHim&pickTwo=.Jewelry&pickTwo=

    <!-- Panel Three -->
    <div class="panel panel--three is-hidden">

<!--     <div class="advertising advertising--horizontal">
        <img src="http://placehold.it/720x90">
    </div> -->

        <div class="panel__inner inner--spend">
            <div class="panel__info">
                <h2 class="panel__title">How much do you want to spend?</h2>
                <h3 class="panel__instructions pick--one">Pick one of the options below</h3>
                <!-- <h3 class="panel__instructions">Remember, it's the thought that counts</h3> -->
            </div>

            <div class="button__group">
                <button class="btn btn--option btn--option-25 btn--spend">Under $25 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
                <button class="btn btn--option btn--option-50 btn--spend">Under $50 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
                <button class="btn btn--option btn--option-75 btn--spend">Under $75 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
                <button class="btn btn--option btn--option-100 btn--spend">Under $100 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
                <button class="btn btn--option btn--option-u250 btn--spend">Under $250 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
                <button class="btn btn--option btn--option-o250 btn--spend">$250 and over <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
            </div>

            <div class="button__group button__controls">
                <button class="btn btn--previous previous--three"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
                <a href="/gifts.html" class="link--three"><button class="btn btn--next next--three">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button></a>
            </div>
        </div> <!-- .panel__inner -->
    </div> <!-- .panel .panel--three -->

if (under25) {
    pickThree = ".Under25";
} else if (under50) {
    pickThree = ".Under50";
} else if (under75) {
    pickThree = ".Under75";
} else if (under100) {
    pickThree = ".Under100";
} else if (under250) {
    pickThree = ".Under250";
} else if (over250) {
    pickThree = ".Over250";
}