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关键字丢失问题`