Previous Lesson Next Lesson

.toggleClass() trong jQuery

Định nghĩa và sử dụng .toggleClass() trong jQuery

.toggleClass(): Thêm hoặc loại bỏ một hoặc nhiều class của thành phần. Việc thêm hoặc loại bỏ class được luân phiên nhau giữa các lần action (VD action Click).

Cấu trúc .toggleClass() trong jQuery

Đã được thêm vào từ phiên bản 1.0

.toggleClass('tên class')

$('p').toggleClass('test');

Đã được thêm vào từ phiên bản 1.3

.toggleClass('tên class',switch)

$('p').toggleClass('test',count % 3 == 0);

Đã được thêm vào từ phiên bản 1.4

.toggleClass([switch])

.toggleClass(function(){})

$('p').toggleClass(function(){...});

.toggleClass(Tên class)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
p { cursor: pointer; }
.test { color: blue; }
</style>
<script>
$(function(){
    $('p').click(function(){
        $(this).toggleClass('test');
    })
});
</script>
</head>

<body>
<p>Thành phần p</p>
<p class="test">Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>
</body>
</html>

Hiển thị trình duyệt:

Click nhiều lần vào các thành phần p, ta sẽ thấy class thay đổi luân phiên giữa các lần click.

.toggleClass(switch)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
p { cursor: pointer; }
.test { color: blue; }
</style>
<script>
$(function(){
    var count = 0;
    $('p').click(function(){
        $(this).toggleClass('test', count++ % 3 == 0);
    })
});
</script>
</head>

<body>
<p>Thành phần p</p>
<p class="test">Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>
</body>
</html>

Hiển thị trình duyệt:

Với cách sử dụng bên trên, các lần thay đổi luân phiên sẽ là 3 lần click.

.toggleClass(function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
p { cursor: pointer; }
.blue { color: blue; }
.yellow { color: yellow; }
</style>
<script>
$(function(){
    $('button').click(function(){
        $('p').toggleClass(function(){
             if ($(this).parent().is('.test')) {
                 return 'yellow';
             } else {
                 return 'blue';
             }
        });
    })
});
</script>
</head>

<body>
<p>Thành phần p</p>
<div class="test"><p>Thành phần p</p></div>
<p>Thành phần p</p>
<p>Thành phần p</p>
<button>Click</button>
</body>
</html>

Hiển thị trình duyệt:

Click luân phiên vào button để thấy hiệu ứng.

Previous Lesson Next Lesson

Preview

Viết câu trả lời

.toggleClass() trong jQuery

Định nghĩa và sử dụng .toggleClass() trong jQuery

Cấu trúc .toggleClass() trong jQuery

.toggleClass(Tên class)

.toggleClass(switch)

.toggleClass(function(){...})

0 Bình luận

Danh mục bài học