0
在stackoverflow上發佈我的第一個問題。我從來沒有發生過這種情況：stackoverflow無法爲我提供已發佈的答案，但第一次發佈了所有內容。這裏是我一直在努力的問題：JQuery/JS：選擇更改甚至不會觸發Jquery代碼的更改
我已經使用HTML表單從一個頁面到另一個（不知道PHP）傳輸數據（特定值）。在專用網站上，我有一個可以通過更改輸入和選擇（下拉列表）進行過濾的列表產品組合。過濾器系統的JQuery完美地工作。但是，我寫了一些JS，它將這些選擇的值更改爲延遲後從前一站點傳輸的值，但此更改不會觸發過濾系統的「選擇更改」事件。下面是在網站上運行的JS。同樣，當我手動更改選擇時，過濾器系統工作，但當底部的JS代碼改變選擇時，過濾器系統不會執行。
任何建議將張開雙臂歡迎。
謝謝！
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 -->
*******編輯********
您好！
我已將以下代碼添加到initselect函數，現在它執行過濾器。但是，它現在不會填寫最後的選擇（價格）。它留空，因此也不包括在過濾器中。現在過濾器可以自動更改第一個選擇。這是該initselect函數中執行的選擇是由JS更改後的代碼：您需要在您的代碼=>$('.combination-filter').change()調用.change()事件
$(".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;
});
嘗試在DOM樹....'$（文件）。在（ '變'， '.combination過濾器選擇'，函數（）{委託更高...' – charlietfl
一個演示如果以上操作不起作用，那麼再現問題也會有所幫助 – charlietfl
只需將「jQuery（window）.load（function（）{」轉換爲「jQuery（document）.ready（function（）{」AND「$（'。combination-過濾器'）。on（'change'，'select'，function（）{「To」$（document）。on（'change'，'select'，function（）{「 – Alok