'this'引用未定义

Question

更改select时，我正在运行get_cities_by_countyID()函数。在我写的函数中：

function get_cities_by_countyID(countryID) {
var element = $(this);     
alert (element.attr("class"));
// other logic...
element.closest('form').find('.cityField').html(html);
}

然而，alert()打印undefined。我该怎么解决这个问题？

<form>  
<div class="col-md-5">
<label>country</label>
<select class="selectpicker" name="attraction[countryCode]" data-live-search="true" onchange="get_cities_by_countyID(this.value)">
<option value=""></option>
</select>
</div>
<div class="col-md-5">
<label>city</label>
<select class="selectpicker cityField" name="attraction[cityID]" data-live-search="true">
<option value=""></option>
</select>   
</div>
</form> 

Answer 1

问题是因为当您使用on*属性分配事件处理程序时，函数不会在引发事件的元素的范围内调用；它是全局调用的，因此this是窗口。这就是您收到undefined的原因。

要解决此问题，请将事件属性中的this引用传递给函数，然后从中检索所需的值：

function get_cities_by_countyID(el) {
var $el = $(el);
var countryId = $el.val();
console.log($el.prop("class"));
//element.closest('form').find('.cityField').html(html);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-md-5">
<label>country</label>
<select class="selectpicker" name="attraction[countryCode]" data-live-search="true" onchange="get_cities_by_countyID(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="col-md-5">
<label>city</label>
<select class="selectpicker cityField" name="attraction[cityID]" data-live-search="true">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</form>

但是，您应该注意，使用on*事件属性已经非常过时，应该尽可能避免使用。无干扰的事件处理程序是更好的实践。它们还允许您在处理程序中使用this关键字作为引发事件的元素的引用。由于您已经在使用jQuery，您可以像这样实现它们：

$(function() {
$('#country').on('change', function() {
var $el = $(this);
var countryId = $el.val();
console.log($el.prop("class"));
//element.closest('form').find('.cityField').html(html);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-md-5">
<label>country</label>
<select class="selectpicker" name="attraction[countryCode]" data-live-search="true" id="country">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="col-md-5">
<label>city</label>
<select class="selectpicker cityField" name="attraction[cityID]" data-live-search="true">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</form>