在stackoverflow上发布我的第一个问题。我从来没有发生过stackoverflow无法为我提供已经发布的答案但是第一次的所有内容。这是我一直在努力解决的问题:
我使用HTML表单将数据(特定值)从一个页面传输到另一个页面(不了解PHP)。在专用网站上,我有一个列表组合,可以通过更改输入和选择(下拉列表)进行过滤。过滤系统的JQuery完美运行。但是,我编写了一些JS,它们将这些选择的值更改为延迟后从上一个站点传输的值,但此更改不会触发"选择更改"过滤系统的事件。下面是在网站上运行的JS。同样,当我手动更改select时,过滤器系统会工作,但是当我的JS代码在底部更改select时,它不会执行。
欢迎任何建议。
谢谢!
jQuery(window).load( function(){
var filters = {};
var $container = $('.grid-container');
$container.isotope();
$('.combination-filter').on( 'change', 'select', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.closest('.btn-groupn');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.find('option:selected').attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
$container.isotope({ filter: filterValue });
return false;
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
$(window).resize(function() {
$container.isotope('layout');
});
function initselect() {
var parameters = location.search.substring(1).split("&");
var temploca = parameters[0].split("=");
loca = unescape(temploca[1]);
$("input[name=locations]").val(loca);
var tempsqua = parameters[1].split("=");
squa = unescape(tempsqua[1]);
$("select[name=squarems]").val(squa);
var temppric = parameters[2].split("=");
pric = unescape(temppric[1]);
$("select[name=pricings]").val(pric);
};
setTimeout(initselect, 1000)
});
HTML代码下方。我为其中的大部分道歉,但希望它足以让我们弄明白。
<header id="header" class="transparent-header full-header sticky-header" data-sticky-class="not-dark">
<div id="header-wrap">
<div class="container clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo">
<a href="http://nomadr.nl" class="standard-logo" data-dark-logo="images/nomadrlogoblack.png"><img src="images/nomadrlogoblack.png" alt="Canvas Logo"></a>
</div><!-- #logo end -->
<div class="combination-filter" style="display: inline-block; width: 40%; margin-top: 11px;">
<div class="navblock" style="border-radius: 4px 0px 0px 4px;">
<i class="icon-globe"></i>
<input id="searchTextField" type="text" name="locations" placeholder="Location">
</div>
<div class="navblock btn-groupn" role="group" data-filter-group="space" data-container="#portfolio" style="margin-left: -4px; margin-right: -4px;">
<i class="icon-external-link"></i>
<select name="squarems">
<option class="btnf" data-filter="*" value="all">All</option>
<option class="btnf" data-filter=".tenm2" value="+10m2">+10m<sup>2</sup></option>
<option class="btnf" data-filter=".fifteenm2" value="+15m2">+15m<sup>2</sup></option>
<option class="btnf" data-filter=".twentym2" value="+20m2">+20m<sup>2</sup></option>
<option class="btnf" data-filter=".twentyfivem2" value="+25m2">+25m<sup>2</sup></option>
</select>
</div>
<div class="navblock btn-groupn" role="group" data-filter-group="price" data-container="#portfolio" style="border-radius: 0px 4px 4px 0px; box-shadow: 0.5px 0.5px 1px lightgrey;">
<i class="icon-euro"></i>
<select name="pricings" >
<option class="btnf" data-filter="*" value="all">All</option>
<option class="btnf" data-filter=".p450" value="450max.">450max.</option>
<option class="btnf" data-filter=".p500" value="500max.">500max.</option>
<option class="btnf" data-filter=".p550" value="550max">550max.</option>
<option class="btnf" data-filter=".p600" value="600max">600max.</option>
</select>
</div>
</div>
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu" class="dark">
<ul class="one-page-menu">
<li><a href="http://nomadr.nl/"><div>Home</div></a></li>
<li class="current"><a href="http://nomadr.nl/listings/"><div>Listings</div></a></li>
<li><a href="http://nomadr.nl/faq/"><div>FAQ</div></a></li>
<li><a href="http://nomadr.nl/proprietor/"><div>Proprietor</div></a></li>
<li><a href="http://nomadr.nl/blog/"><div>Blog</div></a></li>
<li><a href="http://nomadr.nl/contact/"><div>Contact</div></a></li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</header><!-- #header end -->
<section id="content">
<div class="content-wrap" style="padding-top: 50px !important">
<div class="container clearfix">
<!--<div class="row topmargin-lg bottommargin-sm">
<div id="section-features" class="heading-block center">
<h2 class="newprime">Our Current Listings</h2>
<span class="divcenter">Below you can filter and find all the listings we have to offer.</span>
</div>
</div> -->
<div class="clear"></div>
<!-- Portfolio Items
============================================= -->
<div id="portfolio" class="portfolio grid-container clearfix">
<article class="portfolio-item tenm2 fifteenm2 twentym2 p500 p550 p600 west">
<div class="portfolio-image">
<div class="fslider" data-arrows="false" data-pause="10000">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/5042ns/5042ns1-min.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/5042ns/5042ns2-min.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/5042ns/5042ns3-min.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/5042ns/5042ns4-min.jpg" alt="Shake It"></a></div>
</div>
</div>
</div>
<div class="portfolio-overlay" data-lightbox="gallery">
<a href="images/portfolio/5042ns/5042ns1.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
<a href="images/portfolio/5042ns/5042ns2.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="images/portfolio/5042ns/5042ns3.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="images/portfolio/5042ns/5042ns4.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="http://nomadr.nl/listings/5042ns/" class="right-icon"><i class="icon-line-ellipsis"></i></a>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="http://nomadr.nl/listings/5042ns/">Tobias Asserlaan</a></h3>
<span><a href="#">20m<sup>2</sup></a> | <a href="#">€500,-</a> | <a href="#">West</a></span>
</div>
</article>
<article class="portfolio-item tenm2 fifteenm2 twentym2 p550 p600 west">
<div class="portfolio-image">
<div class="fslider" data-arrows="false" data-pause="10000">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room5-min.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room6-min.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room7-min.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room8-min.jpg" alt="Shake It"></a></div>
</div>
</div>
</div>
<div class="portfolio-overlay" data-lightbox="gallery">
<a href="images/portfolio/room5.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
<a href="images/portfolio/room6.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="images/portfolio/room7.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="images/portfolio/room8.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="http://nomadr.nl/listings/5042ns/" class="right-icon"><i class="icon-line-ellipsis"></i></a>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="http://nomadr.nl/listings/5042ns/">Statentlaan</a></h3>
<span><a href="#">20m<sup>2</sup></a> | <a href="#">€550,-</a> | <a href="#">West</a></span>
</div>
</article>
<article class="portfolio-item tenm2 fifteenm2 p500 p550 p600 south">
<div class="portfolio-image">
<div class="fslider" data-arrows="false" data-pause="10000">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room9-min.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room10-min.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room11-min.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room12-min.jpg" alt="Shake It"></a></div>
</div>
</div>
</div>
<div class="portfolio-overlay" data-lightbox="gallery">
<a href="images/portfolio/room9.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
<a href="images/portfolio/room10.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="images/portfolio/room11.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="images/portfolio/room12.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="http://nomadr.nl/listings/5042ns/" class="right-icon"><i class="icon-line-ellipsis"></i></a>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="http://nomadr.nl/listings/5042ns/">Broekhovenseweg</a></h3>
<span><a href="#">15m<sup>2</sup></a> | <a href="#">€500,-</a> | <a href="#">South</a></span>
</div>
</article>
<article class="portfolio-item tenm2 fifteenm2 twentym2 twentyfivem2 p550 p600 south">
<div class="portfolio-image">
<div class="fslider" data-arrows="false" data-pause="10000">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room13-min.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room14-min.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room15-min.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room16-min.jpg" alt="Shake It"></a></div>
</div>
</div>
</div>
<div class="portfolio-overlay" data-lightbox="gallery">
<a href="images/portfolio/room13.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
<a href="images/portfolio/room14.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="images/portfolio/room15.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="images/portfolio/room16.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="http://nomadr.nl/listings/5042ns/" class="right-icon"><i class="icon-line-ellipsis"></i></a>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="http://nomadr.nl/listings/5042ns/">Valkenierstraat</a></h3>
<span><a href="#">25m<sup>2</sup></a> | <a href="#">€550,-</a> | <a href="#">South</a></span>
</div>
</article>
</div><!-- #portfolio end -->
</div>
</div>
</section><!-- #content end -->
******* ******** EDIT
你好!
我已将以下代码添加到initselect函数,现在它确实执行了过滤器。但是,不知怎的,它现在没有填写最后一个选择(价格)。它留空,因此也不包括在过滤器中。过滤器现在可以自动更改第一个选择。这是在js:
更改选择后在initselect函数中执行的代码$(".combination-filter select").each(function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.closest('.btn-groupn');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.find('option:selected').attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
$container.isotope({ filter: filterValue });
return false;
});
答案 0 :(得分:2)
您需要从代码中调用post
事件=&gt; .change()
。
如果以编程方式更改值,则更改事件不会“由浏览器调用”。
答案 1 :(得分:0)
此问题的解决方案如下。而不是
$("select[name=squarems]").val(squa);
我必须添加.change();对于initselect()函数中每个val更改的结尾。这看起来像这样(每个):
$("select[name=squarems]").val(squa).change();
不知何故,这使得它注册为一个更改,并在JS中触发了过滤器事件。
感谢大家的投入!
干杯