1、jQuery的點擊事件
//$()是jquery的選擇器
let star = $(".bi-star");
//click()是jquery的事件
star.click(function () {
// hasClass()、removeClass()和addClass()是jquery的方法
if(star.hasClass('bi-star')){
star.removeClass('bi-star').addClass('bi-star-fill');
}else if(star.hasClass('bi-star-fill')){
star.removeClass('bi-star-fill').addClass('bi-star');
}
});
2、原生js的點擊事件
1）方式一：
let star = document.querySelector(".bi-star");
star.addEventListener("click",toggle);
function toggle() {
star.style.color = "red";
}
2）方式二：
let star = document.querySelector(".bi-star");
star.onclick = function () {
star.style.color = "red";
}
3、注意
兩者之間在標簽的獲取和事件的處理上不同，不可混合使用，
以下是錯誤示范：
//$()是jquery的選擇器
let star = $(".bi-star");
star.onclick = function(){
if(star.hasClass('bi-star')){
star.removeClass('bi-star').addClass('bi-star-fill');
}else if(star.hasClass('bi-star-fill')){
star.removeClass('bi-star-fill').addClass('bi-star');
}
}
onclick()不是jQuery的方法，
讀者可參考【學習筆記】jQuery
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/319784.html
標籤：其他
上一篇：js 陣列回圈操作方法
下一篇：curl流輸出逐行讀取并包含條件