Bagaimana untuk melaksanakan fungsi penapisan dalam jquery-tutorial js-php.cn

Bagaimana untuk melaksanakan fungsi penapisan dalam jquery

藏色散人

Lepaskan： 2021-11-22 11:06:03

asal

3459 orang telah melayarinya

Cara jquery melaksanakan fungsi penapisan: 1. Gunakan appendTo jquery untuk menambah elemen yang diklik pada senarai 2. Gunakan fungsi klon jquery untuk mengalih keluar kandungan secara terus dalam senarai atribut.

Bagaimana untuk melaksanakan fungsi penapisan dalam jquery

Persekitaran pengendalian artikel ini: sistem Windows 7, jquery3.2.1, komputer Dell G3.

Bagaimana untuk melaksanakan fungsi penapisan dalam jquery?

jquery melaksanakan fungsi penapisan.

Penapisan atribut produk

Penapisan atribut produk ialah fungsi yang sangat biasa, biasanya hanya satu atribut daripada jenis yang sama boleh dipilih. Contohnya, julat harga atau jenama, untuk menjadikan kandungan yang dipilih kelihatan lebih intuitif, item pilihan biasanya disenaraikan dan mempunyai fungsi mengklik untuk membatalkan pemilihan dan mengklik untuk menggantikan jenis yang sama.

Dua pelaksanaan lengkap diberikan di bawah.

Pelaksanaan 1:

Gunakan jquery's appendTo untuk menambah elemen yang diklik pada item senarai (sambil menyemak sama ada item senarai mempunyai elemen jenis yang sama, jika ya) Gantikannya supaya ia kembali ke senarai asal),

klik pada elemen dalam item senarai, dan div asal akan dikembalikan Di sini, atribut tersuai digunakan untuk mengembalikan div asal.

Sudah tentu, pelaksanaan ini mempunyai masalah tertentu Memandangkan kelas div dihadkan untuk sama dengan id elemen induk, keadaan ini sangat menyusahkan perlu diikat semula setiap kali peristiwa, rekursi. Terdapat kekurangan kecekapan.

Mari kita lihat idea kedua, yang lebih mudah dan jelas. Kecekapan akan lebih tinggi, dan id dan kelas tidak perlu sama, dan tidak perlu mengikat semula berbilang acara

<!DOCTYPE html>
<html>
<head>
  <title>动画</title>
  <style type="text/css">
    .class1,.class2{
        width: 100px;
        height: 40px;
        margin: 10px;
    }
    #count{
        background-color: sandybrown;
        width: 400px;
        height: 200px;
    }
  </style>
</head>
<body>
<div id=&#39;class1&#39;>
    <button class="class1" data-belong="class1">皮鞋</button>
    <button class="class1" data-belong="class1">凉鞋</button>
    <button class="class1" data-belong="class1">拖鞋</button>
</div>
<div id="class2">
    <button class="class2" data-belong="class2">手套</button>
    <button class="class2" data-belong="class2">皮手套</button>
    <button class="class2" data-belong="class2">毛手套</button>
</div>
<div id="count"></div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
(function check(){
    $(&#39;#class1> button,#class2>button&#39;).off("click").on("click",function(){
        $("#count button."+$(this).attr("data-belong")).appendTo("#"+$(this).attr("data-belong"));
        $(this).appendTo("#count");
        check()
})
    $(&#39;#count  button&#39;).off("click").on("click",function(){
        $(this).appendTo("#"+$(this).attr("data-belong"))
        check()
    })
})()
</script>

Salin selepas log masuk

Pelaksanaan 2:

Gunakan fungsi klon jquery, supaya senarai asal tidak perlu diubah suai dengan mengklik pada kandungan dalam senarai atribut hanya perlu dialih keluar terus, dan id dan kelas tidak perlu konsisten.

Lebih percuma. Kod dikurangkan, tiada rekursi dan tiada masalah pengubahsuaian dan pengikatan data Ia jauh lebih dioptimumkan daripada pelaksanaan 1

Pembelajaran yang disyorkan: "

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
    .class1,.class2{
        width: 100px;
        height: 40px;
        margin: 10px;
    }
    #count{
        background-color: sandybrown;
        width: 400px;
        height: 200px;
    }
    </style>
    <body>
        <div>
            <button class="class1" data-belong="class1">皮鞋</button>
            <button class="class1" data-belong="class1">凉鞋</button>
            <button class="class1" data-belong="class1">拖鞋</button>
        </div>
        <div>
            <button class="class2" data-belong="class2">手套</button>
            <button class="class2" data-belong="class2">皮手套</button>
            <button class="class2" data-belong="class2">毛手套</button>
        </div>
    <div class="count">
    </div>
    </body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//只需保持 button 的 class 标志 和data-belong  一致即可。
    $("div:lt(2) button").click(function(){
        $("div.count ."+$(this).attr(&#39;data-belong&#39;)).remove();
        $(this).clone().appendTo("div.count");
        $(&#39;.count button&#39;).off("click").on("click",function(){
            $(this).remove();
    })
    })
</script>

Salin selepas log masuk

tutorial video jquery"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penapisan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!