Có nhiều lý do để tắt một nút trong ứng dụng web. Cho dù là để ngăn người dùng thêm một mặt hàng đã bán hết vào giỏ hàng của họ hoặc không cho phép người dùng nhấp vào nút sau khi thực hiện một hành động, jQuery không có phương pháp để tắt trực tiếp các nút.
Thay vào đó, chúng tôi sử dụng prop() , một bổ sung mới hơn cho thư viện - xuất hiện trong jQuery 1.6. Nó được giới thiệu như một giải pháp để lấy các giá trị thuộc tính của các phần tử đã chọn. Trước đây, điều này đã được thực hiện với attr() phương thức lấy các giá trị thuộc tính.
Có một phương thức liên quan đến việc nhận các giá trị thuộc tính trong khi cũng truy xuất các giá trị thuộc tính đôi khi mang lại kết quả không thể đoán trước. Kể từ jQuery 1.6, prop() phương pháp đã được giới thiệu để giải quyết sự chênh lệch này. Vì mục đích của chúng tôi, chúng tôi sẽ sử dụng prop() để tắt các nút của chúng tôi vì “đã tắt” là một giá trị thuộc tính của phần tử nút HTML.
Nếu bạn muốn tìm hiểu thêm về cách sử dụng att() so với prop() , đọc lịch sử và hướng dẫn ngắn gọn.
prop () jQuery
Bây giờ chúng ta đã đề cập đến lý do và cách sử dụng prop() , chúng ta có thể xem qua cú pháp. Hãy nhớ rằng prop() chỉ là một phương thức jQuery khác và các phương thức này được gọi trên một phần tử đã chọn - trong trường hợp của chúng ta là một nút. Hãy xem cách chúng tôi có thể vô hiệu hóa một nút có id là “btn”.
<button id='btn' type='submit'> Button is Disabled </button>
HTML này hiển thị nút.
Nút của chúng tôi đang hiển thị! Bây giờ chúng ta có thể đặt giá trị thuộc tính của “disable” thành true bằng cách sử dụng jQuery prop() .
$('#btn').prop('disabled', true)
Như chúng ta thấy, prop() chấp nhận giá trị dưới dạng một chuỗi và chúng tôi đặt giá trị boolean trong đối số thứ hai. Giá trị boolean là true hoặc false. Dưới đây là hướng dẫn đi sâu hơn về cách sử dụng boolean.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Sau khi đặt thuộc tính “đã tắt” thành true, chúng tôi hiển thị một nút không thể nhấp vào. Bây giờ chúng ta đã hiểu cú pháp, hãy xem tại sao và khi nào chúng ta muốn sử dụng cú pháp này. Trong phần tiếp theo, chúng ta sẽ xem xét một trang web thương mại điện tử có các sản phẩm có thuộc tính “đã bán hết chưa?”.
Sử dụng jQuery prop () để vô hiệu hóa một nút
Trong ví dụ này, chúng tôi có một ứng dụng mua sắm sẽ tắt nút “Thêm vào giỏ hàng” nếu sản phẩm được bán hết. Đối với ví dụ này, chúng tôi sẽ hiển thị một nút HTML đơn giản và một
<button class='add' type='submit'> Add to Cart </button> <div> </div>
Hãy xem cách nút của chúng tôi hiển thị.
Bây giờ, hãy tạo một sản phẩm và một hàm gọi lại - một hàm được chuyển cho một hàm khác sẽ được gọi sau - để hiển thị giỏ hàng của chúng ta trong
const product = {
name: 'Jacket',
price: 50.00,
soldOut: false
}
$(document).ready(function() {
$('button.add').click(function(event) {
event.preventDefault()
alert(JSON.stringify(product.soldOut))
if (product.soldOut) {
$('.add').prop('disabled', true)
} else {
$('div').append(product.name)
}
})
})
Chúng tôi đã tạo một biến được gọi là sản phẩm có chứa một đối tượng. Đối tượng có các thuộc tính tên, giá, và đã bán. Nếu tài sản đã bán Hãy nhấp vào Thêm vào giỏ hàng và xem điều gì sẽ xảy ra.
Vì thuộc tính sellOut của chúng tôi được đặt thành false, nên chúng tôi đã hiển thị sản phẩm của mình trong
const product = {
name: 'Jacket',
price: 50.00,
soldOut: true
}
Chúng tôi hy vọng nút Thêm vào giỏ hàng sẽ bị tắt.
Đó chính xác là những gì chúng tôi muốn. Sử dụng câu lệnh điều kiện trong hàm gọi lại, chúng tôi có thể tắt nút Thêm vào giỏ hàng. Giờ đây, người dùng không thể thêm các mặt hàng đã bán hết vào giỏ hàng của họ. Chúng tôi đã tránh được một cơn đau đầu lớn trong ứng dụng thương mại điện tử của mình!
Kết luận
Khi tìm hiểu cách tắt nút HTML bằng jQuery, chúng tôi đã phát hiện ra rằng jQuery không có phương pháp rõ ràng để làm như vậy. Để giải quyết vấn đề này, chúng tôi đã sử dụng prop() để đặt thuộc tính nút "bị vô hiệu hóa" thành true. Sau đó, chúng tôi đã thấy một ví dụ về cách vô hiệu hóa một nút hữu ích.
Hướng dẫn trải nghiệm người dùng trong phát triển web là điều cần thiết. Trong hướng dẫn này, chúng tôi đã sử dụng các nút tắt để hướng dẫn trải nghiệm người dùng. Khám phá cách tắt một nút có thể giúp hướng trải nghiệm người dùng của bạn trong dự án tiếp theo của bạn.