我使用4个jQuery代码来过滤一些html元素
jQuery代码是:
价格筛选:
$(document).ready(function() {
$("#price-range").slider({
range: true,
min: 0,
max: 3000,
values: [1, 2000],
slide: function(event, ui) {
$(".min-price-label").html("€" + ui.values[0]);
$(".max-price-label").html("€" + ui.values[1]);
$('article[data-price]').each(function() {
var dPrice = $(this).attr('data-price');
if (dPrice < ui.values[0] || dPrice > ui.values[1])
$(this).hide();
else
$(this).show();
});
}
});
$(".min-price-label").html("€" + $("#price-range").slider("values", 0));
$(".max-price-label").html("€" + $("#price-range").slider("values", 1));
});
星级评分过滤器:
var grabVal = "";
$('input[type=checkbox]').click(function(e) {
$("input[type=checkbox]").each(function() {
grabVal = $(this).val();
if (!$(this).is(":checked")) {
$("article[data-stars='" + grabVal + "']").hide();
} else {
$("article[data-stars='" + grabVal + "']").show();
}
});
if (!$("input[type=checkbox]").is(":checked")) {
$("article").show();
}
});
A加载更多代码:
$(document).ready(function () {
$('#hotel-list article:gt(4)').hide();
$('#loadMore').click(function () {
$('#hotel-list article:hidden:lt(2)').show();
});
});
$('.myClass').each(function(){
if($(this).attr('src') == ""){
$(this).closest('article').hide();
}
});
最后一个代码隐藏所有有空src的文章“”
$('.myClass').each(function(){
if($(this).attr('src') == ""){
$(this).closest('article').hide();
}
});
Html元素如下:
<article data-stars="<?php echo $StarRating[1];?>" data-price="<?php $Price[1];?>">
<figure>
<a href=""><img width="270" height="160" class="myClass" alt="" src="<?php echo $img[1];?>"></a>
</figure>
<div><p>Content ...</p></div
</article>
Tha代码正在运行,但脚本互相取消。我正在尝试将它们全部合并,以便开始正确地过滤html内容,并希望在这里得到一些帮助。