jq this丢失无法获取当前对象

柔情只为你懂 2024-04-17 06:13 136阅读 0赞

##### 问题描述 #####

超链接标签点击时传递当前对象,获取当前对象的自定义属性,**在传递的过程中,丢失this,导致接受到的对象指向window**,从而无法获取到自定义属性,如下图:  
![在这里插入图片描述][20200105095334173.gif]

###### html结构如下： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70]

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

[20200105095334173.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/77729ba118674de5bf28244cf478e5ed.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/46196c944e4340e19df92d7e837be16c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq this丢失无法获取当前对象

必须使用event.target才能获取当前对象

柔情只为你懂/ 2024年04月17日 06:13/ 0 赞/ 137 阅读

相关 JQ里的THIS与$（THIS）对象组测试来了

网上有很多关于jQuery的this和$(this)的介绍，大多数只是理清了this和$(this)的指向，其实它是有应用场所的，不能一概而论在jQuery调用成员函数时，th

曾经终败给现在/ 2024年04月01日 09:33/ 0 赞/ 108 阅读

相关 java反射获取当前对象

public static void main(String[] args) { User test = test(User.class);

╰+哭是因爲堅強的太久メ/ 2023年10月01日 00:31/ 0 赞/ 58 阅读

相关 html获取当前对象this的标签

$(this).prop("outerHTML")表示得到自己以及子标签的内容 $("d1 d3").prop("innerHTML") 和 $

灰太狼/ 2022年09月30日 03:43/ 0 赞/ 368 阅读

相关 jQuery获取this当前对象子元素对象

<select id="city"> <option value="beijing">北京</option> <option val

Love The Way You Lie/ 2022年08月17日 15:28/ 0 赞/ 262 阅读

相关 JQ-获取当前元素位置

使用JQuery的prevAll()方法获取当前元素之前有多少同级元素。 <!DOCTYPE html> <html> <head>

超、凢脫俗/ 2022年05月16日 08:56/ 0 赞/ 412 阅读

相关获取对象的当前状态

一介绍在文档中获取某个对象的当前状态可以使用readyState属性来实现。 readyState属性是用来获取文档中某个对象的当前状态。语法： \[state=

た入场券/ 2022年05月12日 00:08/ 0 赞/ 237 阅读

相关 vue页面中丢失当前页面this数据

例如：页面中含有以下数据，但是this中却没有该数据，this.userName为undefined data: function () { retu

超、凢脫俗/ 2022年04月27日 16:46/ 0 赞/ 240 阅读

相关 jq .index 获取当前标签位置信息

<div id="headerA" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"

忘是亡心i/ 2022年03月26日 10:14/ 0 赞/ 354 阅读

相关 Java中this表示当前对象的引用

一、 this有两种使用情况，一种就是直接使用“this.属性名”或者“this.方法名()”，另外一种是“this()”。二、使用this实现构造方法的

骑猪看日落/ 2021年12月05日 00:53/ 0 赞/ 323 阅读