问题描述
我正在尝试创建 4 个不同按钮的过滤:
<div class="allCategories">
<div>
<button data-filter="physical">
<img src="/img/difficulties/physical_cube.svg" alt="thunder">
</button>
</div>
<div>
<button data-filter="brain">
<img src="/img/difficulties/brain_cube.svg" alt="glasses">
</button>
</div>
<div>
<button data-filter="skill">
<img src="/img/difficulties/skills_cube.svg" alt="glasses">
</button>
</div>
<div>
<button data-filter="*">
<img src="/img/difficulties/all_cube.svg" alt="stack">
</button>
</div>
</div>
所以当我点击其中一张时,我希望它只显示那些卡片。例如,当我点击物理时,它只显示物理的。 我的视图默认加载了所有数据,如下所示:
<div class="container" >
<div class="row" style="margin-top: 200px">
@foreach ($room_data as $r)
<div class="col-md-6 col-lg-3 " data-category="{{ $r->category }}">
<div class="card-deck" style="margin: 0">
<div id="room_card"class="card mb-4 flex-fill">
<img class="card-img-top" src="/img/room_logos/{{ $r->id }}.png" />
<div class="card-body" style="">
<h5 class="card-title">{{ $r->name }}</h5>
<ul class="room_perc">
<li> <img src="/img/difficulties/physical_cube.svg" alt="physical" />
<p> {{ $r->percentages->physical }} </p>
</li>
<li><img src="/img/difficulties/brain_cube.svg" alt="brain" />
<p> {{ $r->percentages->brain }} </p>
</li>
<li> <img src="/img/difficulties/skills_cube.svg" alt="skills" />
<p> {{ $r->percentages->skills }}</p>
</li>
</ul>
<a href="{{$url_locale}}/rooms/{{$r->id}}" class="stretched-link"></a>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
知道怎么做吗??
我试着用下面的代码来做,但它根本不起作用:
<script>
(function ($) {
"use strict";
// javascript code here. i.e.: $(document).ready( function(){} );
$(document).ready(function ($) {
var $container = $('.container');
$.ajax({
url: "../data/rooms.json",method: "GET",dataType: 'json',success: function (response) {
var template = $('').html();
var renderer = Handlebars.compile(template);
var result = response;
$('.container').html(renderer(result));
runIsotope();
}
});
function runIsotope() {
$container.isotope({
itemSelector: '.row',layoutMode: 'fitRows',fitRows: {
gutter: 40
},getSortData: {
number: '.allCategories parseInt'
}
});
$container.isotope('reloadItems')
// Sort based on price
$('#allCategories').on('click','a',function ( event ) {
var $target = $(event.currentTarget)
var sortValue = $target.attr('data-sort');
console.log( sortValue );
$container.isotope({
sortBy: sortValue
});
});
} //RUN IsotoPE
}); // END DOCUMENT READY
})(jQuery); // END use strict
</script>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)