Bagaimana untuk melaksanakan jQuery multi-condition filtering

Bagaimana untuk melaksanakan jQuery multi-condition filtering_jquery

WBOY

Lepaskan： 2016-05-16 15:33:43

asal

1376 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan kesan penapisan berbilang keadaan dengan jquery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Apabila kami membeli barangan pada platform e-dagang, kami menapis dan membuat pertanyaan berdasarkan jenama, gaya, julat harga dan syarat lain pada halaman senarai produk Apabila kami mengklik pada syarat, set syarat yang dipilih oleh pengguna akan dipaparkan pada halaman, dan syarat padanan yang sepadan akan dipaparkan pada halaman Maklumat produk bersyarat dipaparkan. Jadi hari ini kami menggunakan jQuery untuk mencapai kesan front-end ini.
Paparan operasi:

HTML
Mula-mula, kami mengklasifikasikan syarat pertanyaan dan mengatur bekas syarat li.select-list dan bekas syarat yang dipilih div.select-result pada halaman.

<ul class="select">  
    <li class="select-list">  
      <dl id="select1">  
        <dt>上装：</dt>  
        <dd class="select-all selected"><a href="#">全部</a></dd>  
        <dd><a href="#">针织衫</a></dd>  
        <dd><a href="#">毛呢外套</a></dd>  
        <dd><a href="#">T恤</a></dd>  
        <dd><a href="#">羽绒服</a></dd>  
        <dd><a href="#">棉衣</a></dd>  
        <dd><a href="#">卫衣</a></dd>  
        <dd><a href="#">风衣</a></dd>  
      </dl>  
    </li>  
    <li class="select-list">  
      <dl id="select2">  
        <dt>裤装：</dt>  
        <dd class="select-all selected"><a href="#">全部</a></dd>  
        <dd><a href="#">牛仔裤</a></dd>  
        <dd><a href="#">小脚/铅笔裤</a></dd>  
        <dd><a href="#">休闲裤</a></dd>  
        <dd><a href="#">打底裤</a></dd>  
        <dd><a href="#">哈伦裤</a></dd>  
      </dl>  
    </li>  
    <li class="select-result">  
      <dl>  
        <dt>已选条件：</dt>  
        <dd class="select-no">暂时没有选择过滤条件</dd>  
      </dl>  
    </li>  
  </ul>

Salin selepas log masuk

Selepas menyusun kandungan, tambahkan gaya css pada kandungan halaman dan muatkan js yang berkaitan.

<link rel="stylesheet" type="text/css" href="css/style.css">  
<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript" src="js/script.js"></script>

Salin selepas log masuk

jQuery
Apabila pengguna mengklik pada mana-mana syarat, keadaan semasa yang dipilih ditanda, keadaan bersebelahan dinyahpilih dan kandungan bekas syarat yang dipilih dikemas kini Sila lihat kod:

$(document).ready(function() { 
  $("#select1 dd").click(function() { 
    $(this).addClass("selected").siblings().removeClass("selected"); 
    if ($(this).hasClass("select-all")) { 
      $("#selectA").remove(); 
    } else { 
      var copyThisA = $(this).clone(); 
      if ($("#selectA").length > 0) { 
        $("#selectA a").html($(this).text()); 
      } else { 
        $(".select-result dl").append(copyThisA.attr("id", "selectA")); 
      } 
    } 
  }); 
  $("#select2 dd").click(function() { 
    $(this).addClass("selected").siblings().removeClass("selected"); 
    if ($(this).hasClass("select-all")) { 
      $("#selectB").remove(); 
    } else { 
      var copyThisB = $(this).clone(); 
      if ($("#selectB").length > 0) { 
        $("#selectB a").html($(this).text()); 
      } else { 
        $(".select-result dl").append(copyThisB.attr("id", "selectB")); 
      } 
    } 
  }); 
  $("#selectA").live("click", 
  function() { 
    $(this).remove(); 
    $("#select1 .select-all").addClass("selected").siblings().removeClass("selected"); 
  }); 
  $("#selectB").live("click", 
  function() { 
    $(this).remove(); 
    $("#select2 .select-all").addClass("selected").siblings().removeClass("selected"); 
  }); 
  $(".select dd").live("click", 
  function() { 
    if ($(".select-result dd").length > 1) { 
      $(".select-no").hide(); 
    } else { 
      $(".select-no").show(); 
    } 
  }); 
});

Salin selepas log masuk

Dalam aplikasi sebenar, kita perlu menggabungkan program back-end untuk merealisasikan syarat pemilihan yang kacak, dan kandungan respons halaman juga akan berubah. Pelajar yang berminat boleh mencubanya.

Di atas ialah keseluruhan kandungan artikel ini. Ia memberitahu anda cara melaksanakan fungsi penapisan berbilang keadaan dalam js.