Người Viết : ViKiMi Editor

Câu lệnh Switch trong jQuery giúp chạy khối mã lệnh khác nhau cho các trường hợp khác nhau
Một trong những câu lệnh hữu ích jQuery mang lại đó là switch case. Nhờ câu lệnh switch case chúng ta sẽ có thể tạo ra các xử lý khác nhau trong các trường hợp khác nhau. Nếu tất cả các trường hợp không diễn ra, chúng ta vẫn có thể tạo một xử lý mặc định để thực thi. Những gì câu lệnh switch case có thể làm giúp công việc trở nên khoa học hơn bao giờ hết.
Vậy chúng ta có thể dễ dàng sử dụng câu lệnh switch case trong jQuery?
Câu trả lời là thật dễ dàng để sử dụng câu lệnh này.
Và chúng ta có thể vận dụng câu lệnh vòng lặp này thật nhanh chóng, hiệu quả.
Một ngôn ngữ lập trình bình thường có những gì thì bạn cũng có thể tìm thấy những thứ như vậy với jQuery.
jQuery đem lại cho chúng ta nhiều thứ khi lập trình :
+ Truy vấn và tìm những phần tử HTML (Giao diện)
+ Các khai báo biến thông thường
+ Các định nghĩa chức năng hàm để có những xử lý khác nhau
+ Các biểu thức tính toán cần thiết
+ Các tập hợp lệnh có điều kiện, tập hợp lệnh vòng lặp có điều kiện etc…
+ Các tác vụ xử lý kết nối dữ liệu, xử lý File cần thiết etc…
Chúng ta có thể làm được rất nhiều thứ khi lập trình với jQuery.
Nếu bạn quen với những câu lệnh vòng lặp thì bạn cũng thấy rằng jQuery cũng cung cấp cho chúng ta đầy đủ những câu lệnh vòng lăp như bất kỳ ngôn ngữ nào, cách sử dụng cũng vậy. Và chúng ta có thể xem qua những câu lệnh vòng lặp có thể có :
+ Câu lệnh vòng lặp While
+ Câu lệnh vòng lặp Do … While
+ Câu lệnh vòng lặp For
+ Câu lệnh vòng lặp For-each
Thực hiện xử lý dữ liệu nhờ những lệnh vòng lặp giúp ích cho các lệnh có điều kiện và dễ dàng tạo một chương trình xử lý các dữ liệu phức tạp. Do đó, nếu bạn sử dụng jQuery thì tập những câu lệnh vòng lặp là điều bạn cần biết và quen thuộc.
Chúng ta sẽ xem cách làm việc của từng câu lệnh vòng lặp trong jQuery.
LỆNH SWITCH CASE TRONG JQUERY
Câu lệnh switch case được sử dụng để thực hiện các hành động khác nhau dựa trên các điều kiện khác nhau.
Sử dụng câu lệnh switch case để chọn một trong nhiều khối mã sẽ được thực thi, dựa vào các trường hợp cụ thể.
[ Các vòng lặp có thể thực thi một khối mã miễn là một điều kiện cụ thể là đúng ]
Cú pháp của lệnh switch case :
switch(expression) {
case x:
// code block to be executed
break;
case y:
// code block to be executed
break;
default:
// code block to be executed
}
Cách lệnh switch case được thực hiện:
+ Bước 1 >> Biểu thức / Expression được đánh giá một lần.
+ Bước 2 >> Giá trị của biểu thức được so sánh với các giá trị của từng trường hợp / case.
+ Bước 3 >> Nếu khớp, khối mã liên quan sẽ được thực thi.
+ Bước 4 >> Nếu không khớp, khối mã mặc định sẽ được thực thi.
EXAMPLE ::
Sử dụng câu lệnh switch trong jQuery, Kiểm tra các trường hợp có hay không mã giảm giá. Với các trường hợp khác nhau thì sẽ hiển thị trên giao diện người dùng cách khác nhau.
Nội dung Code của câu lệnh switch :
switch(var_2) {
case “Get Coupons”:
element_2.css(“background-color”, “red”);
element_2.css(“opacity”, “0.8”);
element_2.css(“font-size”, “20px”);
break;
case “No Coupons”:
element_2.find(“.product_coupon”).css(“background-color”, “green”);
element_2.find(“.product_coupon”).css(“opacity”, “0.8”);
element_2.find(“.product_coupon”).css(“font-size”, “20px”);
break;
default:
// code to be executed if n is different from case 1 and 2
}
Nội dung Code đầy đủ trên trang sanpham.html
Hình Ảnh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var j, element_2, var_2, value;
var couponElements = $(".product_coupon");
var rowElements = $("tr");
for (j =0 ;j < rowElements.length; j++) {
if( j== 0 ){
$("#welcome_to_Bee").html("Greeting Customers <b style='color:green;'> In BEE SHOP </b>");
}
element_2 = rowElements.eq(j); /* Select table row based on row index */
if(element_2.find(".product_coupon").length){
var_2 = element_2.find(".product_coupon").text();
switch(var_2) {
case "Get Coupons":
element_2.css("background-color", "red");
element_2.css("opacity", "0.8");
element_2.css("font-size", "20px");
break;
case "No Coupons":
element_2.find(".product_coupon").css("background-color", "green");
element_2.find(".product_coupon").css("opacity", "0.8");
element_2.find(".product_coupon").css("font-size", "20px");
break;
default:
// code to be executed if n is different from case 1 and 2
}
}
}
});
});
</script>
</head>
<body>
<p id="welcome_to_Bee"> Loading ... </p>
<p id="test">These are products <b>in Bee Shop</b> .</p>
<table class="tbl_company" border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Coupons</th>
</tr>
<tr>
<td>Quần Áo</td>
<td><p class="price_product">200000</p></td>
<td class="product_coupon">Get Coupons</td>
</tr>
<tr>
<td>Giày Dép</td>
<td><p class="price_product">300000</p></td>
<td class="product_coupon">No Coupons</td>
</tr>
<tr>
<td>Mũ Nón</td>
<td><p class="price_product">150000</p></td>
<td class="product_coupon">No Coupons</td>
</tr>
<tr>
<td>Trang Sức</td>
<td><p class="price_product">150000</p></td>
<td class="product_coupon">Get Coupons</td>
</tr>
<tr>
<td>Mỹ Phẩm</td>
<td><p class="price_product">500000</p></td>
<td class="product_coupon">Get Coupons</td>
</tr>
</table>
<br/>
<button id="btn1">Best Sale</button>
</body>
</html>
Như vậy, thật đơn giản khi sử dụng câu lệnh switch case trong jQuery. Câu lệnh switch case trong jQuery cho phép thực thi các khối mã lệnh khác nhau theo các trường hợp khác nhau, khối mã lệnh sẽ chứa các yêu cầu thiết kế cần thiết.
Nhờ câu lệnh switch case chúng ta sẽ có các trường hợp khác nhau xử lý phần giao diện hiển thị tốt hơn, đồng thời cũng tăng tốc tốt cho Website. Nguyên nhân đó là tất cả xử lý hiển thị sẽ thực hiện trên phía Client, nhờ vậy tốc độ tốt hơn, linh hoạt hơn.
Thật tốt khi sử dụng jQuery!