问题描述
超链接标签点击时传递当前对象,获取当前对象的自定义属性,在传递的过程中,丢失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关键字丢失问题`