我发现了一个非常有用的 Jquery example to filter divs基于更改选择选项。
这是 fiddle :https://jsfiddle.net/vgdwyqxb/
我的问题是: 我使用此代码来过滤项目,每个项目都有一个转到另一个页面的 URL。当用户单击项目时,他/她将转到项目详细信息页面。在这些页面上,有一个“返回”按钮。当他们返回时,所有筛选选择都会丢失。我想保留过滤器选择。
我在其他页面添加了一个goBack()方法返回到过滤页面。当我点击 goback 时,筛选页面会记住选择了哪个选项,但会显示所有 div(不筛选 div)。据我所知,必须完成“更改选项”才能过滤 div,所以当我返回过滤页面时,即使我最后选择的选项被选中,它也不再过滤。
我的问题是:当用户从项目详细信息页面返回时,我应该怎么做才能让筛选页面记住?
提前致谢。
jQuery('#selectContainer select').on('change', function() {
var color = jQuery('#select-1').val();
var shape = jQuery('#select-2').val();
var style = jQuery('#select-3').val();
jQuery('div.object').hide();
jQuery('div.object').each(function() {
if(jQuery(this).hasClass(color) && jQuery(this).hasClass(shape) && jQuery(this).hasClass(style)) {
jQuery(this).show();
}
});
});
//$( document ).ready(function() {
$('#btnAuckland').click(function(){
$('#select-1').val('Red').trigger('change');
})
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="selectContainer">
<select name="select-1" id="select-1">
<option value="allColors">All</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
</select>
<select name="select-2" id="select-2">
<option value="allShapes">All</option>
<option value="Square">Square</option>
<option value="Circle">Circle</option>
</select>
<select name="select-3" id="select-3">
<option value="allStyles" selected>All</option>
<option value="Solid">Solid</option>
<option value="Outline">Outline</option>
</select>
</div>
<hr />
<div class="object allColors allShapes allStyles Red Square Solid">
<p><a href="nextpage.html"> This is a solid, red square. </a> </p>
</div>
<div class="object allColors allShapes allStyles Red Square Outline">
<p>This is a red, square outline.</p>
</div>
<div class="object allColors allShapes allStyles Red Circle Solid">
<p>This is a solid, red circle.</p>
</div>
<div class="object allColors allShapes allStyles Red Circle Outline">
<p>This is a red, circle outline.</p>
</div>
<div class="object allColors allShapes allStyles Blue Square Solid">
<p>This is a solid, blue square.</p>
</div>
<div class="object allColors allShapes allStyles Blue Square Outline">
<p>This is a blue, square outline.</p>
</div>
<div class="object allColors allShapes allStyles Blue Circle Solid">
<p>This is a solid, blue circle.</p>
</div>
<div class="object allColors allShapes allStyles Blue Circle Outline">
<p>This is a blue, circle outline.</p>
</div>
最佳答案
要实现您的目标,您可以使用 localStorage()
保存一个 JSON 编码的字符串,其中包含从三个过滤器 select
元素中做出的最后选择。
加载页面后,您可以检索该 JSON,将所选值应用回 select
并再次过滤内容。
执行此操作的代码可能如下所示:
// Save the selected values to JSON in localStorage
let saveObjectFilterSettings = () => {
let filters = $('#selectContainer select').map((i, el) => ({
id: el.id,
val: el.value
})).get();
localStorage.setItem('filter', JSON.stringify(filters));
}
// Retrieve the filter JSON from localStorage and apply it to the DOM
let retrieveObjectFilterSettings = () => {
let filters = JSON.parse(localStorage.getItem('filter') || '[]');
filters.forEach(obj => $(`#${obj.id}`).val(obj.val));
}
// Apply the selected filters to the DOM
let filterObjects = () => {
var color = $('#select-1').val();
var shape = $('#select-2').val();
var style = $('#select-3').val();
$('div.object').each(function() {
let $el = $(this);
$el.toggle($el.hasClass(color) && $el.hasClass(shape) && $el.hasClass(style))
});
}
jQuery($ => {
retrieveObjectFilterSettings();
filterObjects();
$('#selectContainer select').on('change', function() {
saveObjectFilterSettings();
filterObjects();
});
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="selectContainer">
<select name="select-1" id="select-1">
<option value="allColors">All</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
</select>
<select name="select-2" id="select-2">
<option value="allShapes">All</option>
<option value="Square">Square</option>
<option value="Circle">Circle</option>
</select>
<select name="select-3" id="select-3">
<option value="allStyles" selected>All</option>
<option value="Solid">Solid</option>
<option value="Outline">Outline</option>
</select>
</div>
<hr />
<div class="object allColors allShapes allStyles Red Square Solid">
<p><a href="nextpage.html"> This is a solid, red square. </a> </p>
</div>
<div class="object allColors allShapes allStyles Red Square Outline">
<p>This is a red, square outline.</p>
</div>
<div class="object allColors allShapes allStyles Red Circle Solid">
<p>This is a solid, red circle.</p>
</div>
<div class="object allColors allShapes allStyles Red Circle Outline">
<p>This is a red, circle outline.</p>
</div>
<div class="object allColors allShapes allStyles Blue Square Solid">
<p>This is a solid, blue square.</p>
</div>
<div class="object allColors allShapes allStyles Blue Square Outline">
<p>This is a blue, square outline.</p>
</div>
<div class="object allColors allShapes allStyles Blue Circle Solid">
<p>This is a solid, blue circle.</p>
</div>
<div class="object allColors allShapes allStyles Blue Circle Outline">
<p>This is a blue, circle outline.</p>
</div>
这是 jsFiddle 中的一个工作示例- 我不得不为此使用 fiddle ,因为 SO 片段是沙盒化的,不允许访问 localStorage。
关于javascript - 如何在 Jquery 选择/选项过滤系统中保留最后的首选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67905506/