thực hành - Lọc các phần tử

Trong bài thực hành này, chúng ta sẽ tìm hiểu chức năng lọc các phần tử bằng HTML, CSS và JavaScript.

Lọc các phần tử

Click vào các nút button để lọc các phần tử tương ứng.

BMW

Orange

Volvo

Red

Mustang

Blue

Cat

Dog

Melon

Kiwi

Banana

Lemon

Cow

Xem kết quả

Tạo chức năng lọc các phần tử

Bước 1) Thêm HTML:

Ví dụ

<div class="mybtnContainer">
    <button class="myBtn active" >Show All</button>
    <button class="myBtn" >Cars</button>
    <button class="myBtn" >Animals</button>
    <button class="myBtn" >Fruits</button>
    <button class="myBtn" >Colors</button>
</div>
<div class="myContainer">
    <div class="filterDiv cars">BMW</div>
    <div class="filterDiv colors">Orange</div>
    <div class="filterDiv cars">Volvo</div>
    <div class="filterDiv colors">Red</div>
    <div class="filterDiv cars">Mustang</div>
    <div class="filterDiv colors">Blue</div>
    <div class="filterDiv animals">Cat</div>
    <div class="filterDiv animals">Dog</div>
    <div class="filterDiv fruits">Melon</div>
    <div class="filterDiv fruits">Kiwi</div>
    <div class="filterDiv fruits">Banana</div>
    <div class="filterDiv fruits">Lemon</div>
    <div class="filterDiv animals">Cow</div>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho các phần tử button */
.mybtnContainer > .myBtn {
    border:none;
    padding:8px 12px;    
    margin-left:5px;
    cursor:pointer;
    background-color:#ccc;
    border-radius:5px;
}
/* Thêm hiệu ứng khi hover */
.mybtnContainer > .myBtn:hover:not(.active) {
    background-color:yellow;
    color:red;    
}
/* Tạo kiểu cho lớp active */
.myBtn.active {
    background-color:orange;
    color:white;    
}
.myContainer {
    margin-top:20px;
    width:100%;    
    overflow:hidden;
}
/* Tạo kiểu cho các phần tử div */
.myContainer > .filterDiv {
    float:left;
    padding:20px;
    background-color:dodgerblue;
    margin-left:5px;
    margin-top:5px;
    color:white;
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>
selectionElm();

// Định nghĩa hàm lọc các phần tử
function selectionElm() {
    
    // Khai báo các biến
    var a, b, c, d, i, j;
    a = document.getElementsByClassName('myBtn');
    for(i = 0; i < a.length; i++) {
        
        // Các sự kiện click cho các nút button
        a[i].onclick = function() {
            b = this.innerText.toLowerCase();
            c = document.getElementsByClassName('filterDiv');
            for(j = 0; j < c.length; j++) {
                d = c[j].className.toLowerCase();
                if(b == "show all") {
                    c[j].style.display = "block";
                }else if(d.indexOf(b) > -1) {
                    c[j].style.display = "";
                }else{
                    c[j].style.display = "none";
                }
            }    
        }
    }
}

// Thêm và xóa lớp active cho các phần tử button
var a, b, i, j;
a = document.getElementsByClassName('myBtn');
for(i = 0; i < a.length; i++) {
    a[i].addEventListener("click",function() {
        b = document.getElementsByClassName('myBtn');
        for(j = 0; j < b.length; j++) {
            b[j].className = b[j].className.replace(" active","");
        }
        this.className += " active";    
    });
}
</script>