Question

function toDelete(book_id){
	var parent = $(this).closest('tr');
	$.ajax({
		type: 'GET',
		url: 'url-to-delete-book',
		data:{ book_id: book_id },
		success: function(response){
			if(response == 'success'){
				parent.slideUp(200,function() {
					parent.remove();
				});
			}
		}
	})
};

<table>
	<tbody>
		<tr>
			<th>No</th>
			<th>Title</th>
			<th>Author</th>
			<th>Action</th>
		</tr>
		<tr>
			<td>1</td>
			<td>Harry Potter</td>
			<td>J.K Rowling</td>
			<td><a href="javascript:;" onclick="toDelete(2)">Delete</a></td>
		</tr>
		<tr>
			<td>2</td>
			<td>The Great Gatsby</td>
			<td>F. Scott Fitzgerald</td>
			<td><a href="javascript:;" onclick="toDelete(1)">Delete</a></td>
		</tr>
	</tbody>
</table>

我正在尝试删除书籍数据时删除表格的行。但是当我在javascript函数中执行$(this).closest('tr')时，我在控制台e.fn.init [prevObject: e.fn.init(1), contect: undefined]中有这个。如何获取函数内的父元素？谢谢。

Answer 1

var parent = $(this).closest('tr');

您已将this传递给jQuery，但在这种情况下，您知道this是什么吗？如果功能是＆＃34;只是＆＃34;调用，就像在这种情况下，this将是被调用的函数（function toDelete） - 您可以通过发出console.log(this)将其记录在控制台中。并且该函数没有最接近的<tr>元素。

您应该使用元素调用函数以从<tr>参数中选择最接近的this（例如，从onclick中选择toDelete.call(this, 1)），或者将元素作为参数传递给toDelete函数（例如toDelete(this, 1)，而函数定义为function toDelete(element, book_id)，jQuery选择器为$(element).closest('tr')。

次要更新

显然我并不完全清楚this在这种情况下的含义。我在Chrome的开发者控制台中尝试过，this似乎不是事件（如CBroe所提到的），也不是函数（如我所提到的），而是Window对象。

function a() { console.log(this); }
function x() { console.log(this); }
x.prototype.y = function() { console.log(this); }

a(); // Window
x(); // Window
x.y(); // x

Answer 2

尝试以下内容

function toDelete(book_id){
	var parent = $(event.target).closest("tr");

	$.ajax({
		type: 'GET',
		url: 'url-to-delete-book',
		data:{ book_id: book_id },
		success: function(response){
			if(response == 'success'){
				parent.slideUp(200,function() {
					parent.remove();
				});
			}
		}
	});
   };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
	<tbody>
		<tr>
			<th>No</th>
			<th>Title</th>
			<th>Author</th>
			<th>Action</th>
		</tr>
		<tr>
			<td>1</td>
			<td>Harry Potter</td>
			<td>J.K Rowling</td>
			<td><a href="javascript:;" onclick="toDelete(2)">Delete</a></td>
		</tr>
		<tr>
			<td>2</td>
			<td>The Great Gatsby</td>
			<td>F. Scott Fitzgerald</td>
			<td><a href="javascript:;" onclick="toDelete(1)">Delete</a></td>
		</tr>
	</tbody>
</table>

使用javascript函数获取最接近的元素

2 个答案: