将几个jQuery过滤器合并为一个

时间:2015-01-23 18:36:13

标签: javascript jquery html

我使用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内容,并希望在这里得到一些帮助。

0 个答案:

没有答案