我正在尝试实现以下功能:当用户登录时,他们将首先看到数字1 2 3
,然后开始选择其他选项以看到另一个数字,但是即使我将选择的值添加到我的计算机中,它最终也会显示所有数字选项标签:
这是我的页面: https://github.com/jOOQ/jOOQ/issues/10361
这是我的index.html
:
<p>
<select class="filters-select">
<option selected value=".one">one</option>
<option value=".two">two</option>
<option value=".three">three</option>
</select>
</p>
<div class="card-deck text-dark" id="grid">
<div class="element-item one card">
<div class="card-body">
<h4 class="card-title">1</h4>
</div>
</div>
<div class="element-item one card">
<div class="card-body">
<h4 class="card-title">2</h4>
</div>
</div>
<div class="element-item one card">
<div class="card-body">
<h4 class="card-title">3</h4>
</div>
</div>
<div class="element-item two card">
<div class="card-body">
<h4 class="card-title">4</h4>
</div>
</div>
<div class="element-item two card">
<div class="card-body">
<h4 class="card-title">5</h4>
</div>
</div>
<div class="element-item two card">
<div class="card-body">
<h4 class="card-title">6</h4>
</div>
</div>
<div class="element-item three card">
<div class="card-body">
<h4 class="card-title">7</h4>
</div>
</div>
<div class="element-item three card">
<div class="card-body">
<h4 class="card-title">8</h4>
</div>
</div>
<div class="element-item three card">
<div class="card-body">
<h4 class="card-title">9</h4>
</div>
</div>
</div>
</div>
<script>
// init Isotope
var $grid = $('#grid').isotope({
itemSelector: '.element-item',
});
// filter functions
var filterFns = {
// show if name ends with -ium
ium: function () {
var name = $(this).find('.name').text();
return name.match(/ium$/);
}
};
// bind filter on select change
$('.filters-select').on('change', function () {
// get filter value from option value
var filterValue = this.value;
// use filterFn if matches value
filterValue = filterFns[filterValue] || filterValue;
$grid.isotope({
filter: filterValue
});
});
</script>
如何仅在页面上显示数字1 2 3
而不是全部数字