[英]Select previous “this” element
I have a piece of javascript code where I am trying to get to the previous element declared. 我有一段JavaScript代码,试图在此声明之前的元素。 Currently I have two onclick functions within eachother.
目前,我彼此之间有两个onclick函数。
$('#formIngredient').on("click", '.newIngredient', function() {
value = $(this).attr('data-name');
$(this).attr('data-isactive', 'true');
$('#newIngredientInput').val(value);
$('#newIngredient').modal('show')
$('#createNewIngredient').click(function() {
inputName = $('#newIngredientInput').val();
inputCategory = $('#newIngredientCategory').val();
var newIngredient = $.ajax({
type: "GET",
url: '/content/includes/ajax/createNewIngredient.php',
data: {name: inputName, id_category: inputCategory}
});
newIngredient.done(function(result) {
//PAI.showPage(PAI['PAGE']);
$(this).parent().replaceWith('Hello');
$('#newIngredient').modal('hide');
});
});
});
I am trying to use the previous element with this code. 我正在尝试将上一个元素与此代码一起使用。
$(this).parent().replaceWith('Hello');
Any ideas? 有任何想法吗?
The scope of $(this)
seems to be your issue here... you need to correct your code. $(this)
的范围似乎是您在这里遇到的问题...您需要更正代码。
$('#createNewIngredient').click(function() {
var self = this; // This is the #createNewIngredient element
inputName = $('#newIngredientInput').val();
inputCategory = $('#newIngredientCategory').val();
var newIngredient = $.ajax({
type: "GET",
url: '/content/includes/ajax/createNewIngredient.php',
data: {name: inputName, id_category: inputCategory}
});
newIngredient.done(function(result) {
//PAI.showPage(PAI['PAGE']);
// $(this).parent().replaceWith('Hello'); // $(this) scope is lost to current function... so
$(self).parent().replaceWith('Hello'); // This is now the scope you need
$('#newIngredient').modal('hide');
});
});
使用以下代码:
$(this).parent().prev().replaceWith('Hello');
I'll pass about your code logic (nested click events), but your problem seems to by about 'this' reference (scoping): 我将介绍您的代码逻辑(嵌套的单击事件),但是您的问题似乎是由“ this”参考(作用域)引起的:
var self = this;
var newIngredient = $.ajax({
type: "GET",
url: '/content/includes/ajax/createNewIngredient.php',
data: {name: inputName, id_category: inputCategory}
});
newIngredient.done(function(result) {
//PAI.showPage(PAI['PAGE']);
$(self ).parent().replaceWith('Hello');
$('#newIngredient').modal('hide');
});
This was the simplest way, but better would be to use closure: 这是最简单的方法,但是最好使用闭包:
(function(self){
var newIngredient = $.ajax({
type: "GET",
url: '/content/includes/ajax/createNewIngredient.php',
data: {name: inputName, id_category: inputCategory}
});
newIngredient.done(function(result) {
//PAI.showPage(PAI['PAGE']);
$(self ).parent().replaceWith('Hello');
$('#newIngredient').modal('hide');
});
})(this);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.