老师，问个关于jquery中this和$this的问题

来源：3-12 自由编程

学习plus

2020-10-15 23:02:21

具体遇到的问题

我在写下面两步时需要data无法获取的问题，我原先没有写
var $this = $(this);
控制台会报错显示没有on方法，它的这个this指向的是html元素。
是因为html元素不是对象，没有jquery封装的on方法的缘故吗？
然后我打印了下$this
发现出来是个对象，这是个啥道理，是因为$符号自动把html元素转换为jquery对象吗？

报错信息的截图

尝试过的解决思路和结果

粘贴全部相关代码，切记添加代码注释（请勿截图）

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=b8be011c2c2cb53ab3503877757970fc"></script> 
	<style type="text/css">
		* { margin: 0; padding: 0; }
		button { border: none; outline: none; }
		#container {width:100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }  
		#search {width: 400px; height: 350px; position: absolute; top: 10px; left: 10px; box-shadow: 2px 5px 5px 2px gray; border: 1px solid #ccc; background: #fff; z-index: 99;}
		#title { width: 100%; height: 50px; line-height: 50px; text-align: center; font-size: 30px; font-weight: bold; color: #000;}
		.rl {float: right;}
		.clr:after { content: '';height: 0;display: block;clear: both; visibility: hidden;}
		#input .item {height: 40px; margin: 5px 10px;}
		#input .item span{ line-height: 40px; font-size: 16px;}
		#input .item input{width: 200px; height: 31px; margin-left: 15px;}
		#input .item .btn{width: 50px; height: 35px; background-color: #87CEEB; margin-left: 10px; color: #fff;}
		#limitControl { text-align: center; }
		#limitControl #limitBtn { width: 100px; height: 35px; background-color: #ccc; color: #000;}
	</style>
</head>
<body>
	<div id="container"></div>
	<div id="search">
		<div id="title">工具栏</div>
		<div id="input">
			<div class="item clr">
				<button class="btn rl" data-btn="city">确定</button>
				<input class="rl" type="text" name="" id="" data-search="city">
				<span class="rl">搜索城市</span>
			</div>
			<div class="item clr">
				<button class="btn rl" data-btn="zoom">确定</button>
				<input class="rl" type="text" name="" id="" data-search="zoom">
				<span class="rl">设置显示级别</span>
			</div>
		</div>
		<div id="limitControl">
			<button id="limitBtn">解除范围限制</button>
		</div>		
	</div>

	<script type="text/javascript">
		//节点获取
		var $limitBtn = $('#limitBtn'),
			$search = $('#search');
			$searchInputs = $('#input').find('input'),
			$searchBtns = $('#input').find('button');
		var myMap = new AMap.Map('container');
		var myBounds = new AMap.Bounds([116.567542,39.997639],[116.22422,39.813285]);
		myMap.setBounds(myBounds);
		myMap.setLimitBounds(myMap.getBounds());
		$search.data('limitIF','limit');

		//范围限制解除功能
		$limitBtn.on('click',function(){
			var limitData = $search.data('limitIF');
			if(limitData === 'limit'){
				myMap.clearLimitBounds();
				$search.data('limitIF','nolimit');
				$limitBtn.html('开启范围限制');
			}else{
				myMap.setLimitBounds(myMap.getBounds());
				$search.data('limitIF','limit');
				$limitBtn.html('解除范围限制');
			}
		})

		
		//城市 级别 搜索功能
		$searchBtns.each(function(){
			this.on('click',function(){
				if(this.data('btn') == "city"){
					$searchInputs.each(function(){
						if(this.data('search') == "city"){
							var cityVal = this.val();
							console.log(cityVal);
						}
					});
				}
			});
		});
	</script> 
</body>
</html>

写回答

1回答

好帮手慕慕子

2020-10-16

已采纳

同学你好，对于你的问题解答如下：

因为事件中的this是指向绑定事件的元素，属于js中的DOM对象，无法使用jQuery对象的on方法，所以直接使用this调用on方法会出现报错。
var $this = $(this); 就不会报错了，是因为$()这个方法将原本的DOM对象转成了jQuery对象，就可以使用jQuery提供的方法了， 而不是因为$this中的这个$符号。如下图所示，可以输出测试结果，对比理解下