jq this丟失無法獲取當前對象

問題描述

      超鏈接標籤點擊時傳遞當前對象,獲取當前對象的自定義屬性,在傳遞的過程中,丟失this,導致接受到的對象指向window,從而無法獲取到自定義屬性,如下圖:

html結構如下：

jq代碼結構

function removeMusic() {
	console.log($(this));
	var _mp3 = $(this).data("mp3");
	var playStr = $.cookie("playListArray");
	var playJson = JSON.parse(playStr);
	for (let i in playJson) {
		if (playJson[i].mp3.indexOf(_mp3) != -1) {
			// console.log("條件爲真");
			playJson.splice(i, i);
		}
	}
	stoCookie(playJson);
}
//存儲cookie
function stoCookie(str) {
	$.cookie("playListArray", JSON.stringify(str), {
		expires: 365
	});
	
	if($.cookie("playListArray") == undefined){
		document.cookie = JSON.stringify(str);
	}
	// console.log($.cookie("playListArray"));
}

解決思路

發生這種情況是因爲一個在jq當中比較常見的問題,即 this丟失問題,既然知道了問題的關鍵,現在我們獲取可以對症入藥,尋找解決這個問題的方法了,解決辦法如下:

####　解決方法
使用event事件,即:

function removeMusic(event) {
//使用event事件接受當前對象
	var that = event.target;
	var _mp3 = $(that).data("mp3");
	var playStr = $.cookie("playListArray");
	var playJson = JSON.parse(playStr);
	for (let i in playJson) {
		if (playJson[i].mp3.indexOf(_mp3) != -1) {
			// console.log("條件爲真");
			playJson.splice(i, i);
		}
	}
	stoCookie(playJson);
}

點擊事件傳遞的參數:

 onclick='removeMusic(event)'

這樣就可以有效解決jq當中this關鍵字丟失問題`