gpt4 book ai didi

javascript - Jquery 插件无法在多个元素上正常工作

转载 作者:行者123 更新时间:2023-11-30 20:20:24 25 4
gpt4 key购买 nike

我已经创建了自己的简单 jquery 插件,但是当我放置 2 个元素并在每个元素上调用插件时我遇到了一些问题

我的js代码:

function fTable(element,options){
self = this;
this.$element = $(element);
this.table = $(this.$element).find('table');
this.thead = $(this.table).find('thead');
this.tbody = $(this.table).find('tbody');
coloumn = options.coloumn;

this.defaults = {

}

//Merge default options with user options
this.options = $.extend(true, {}, this.defaults, options);
this.init();
}

fTable.prototype = {
init : function(){
self = this;
this.td = $(this.thead).find('tr td:first');
$(this.td).html('<a class="add">Plus</a>');
this.bindEvents();
},

bindEvents : function(){
self = this;
console.log(this.table);
$(this.table).on('click', '.add', function(){
$row = '<tr>';
$row += '<td></td>';

$.each(coloumn, function(index, value){
$row += '<td><input type="text" value="" name='+value.name+' '+value.prop+'></td>';
});

$row += '</tr>';
console.log(self);
$($row).appendTo(self.table);
lastTR = $(self.tbody).find('tr:last');
$(lastTR).find('td:first').html('<a class="remove">Remove</a>');
});

$(this.table).on('click', '.remove', function(){
row = $(this).closest('tr');
$(row).remove();
});
}
}

$.fn.fTable = function(options){
return this.each(function(){
new fTable(this,options);
});
}

$('.crud').fTable({
coloumn:[
{'type':'text','name':'NIK','prop':'disabled'},
{'type':'text','name':'NAME','prop':''},
]
});

$('.crud2').fTable({
coloumn:[
{'type':'text','name':'NIK','prop':'disabled'},
{'type':'text','name':'NAME','prop':''},
]
});

HTML:

<div class="crud">
<table class="table table-bordered">
<thead>
<tr>
<td style="width:10%"></td>
<td>NIK</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>Ardhi</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>Mega</td>
</tr>
</tbody>
</table>
</div>

<div class="crud2">
<table class="table table-bordered">
<thead>
<tr>
<td style="width:10%"></td>
<td>NIK</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>Zaphire</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>Rexa</td>
</tr>
</tbody>
</table>
</div>

问题是当我在第一个表(class='crud')上单击“加号”时,它会将新行添加到第二个表(class='crud2')而不是第一个表(class='crud')

有什么帮助吗?

最佳答案

你的范围有问题。在您的 bindEvents 原型(prototype)函数中,您声明了 self=this 但您并未引用当前范围。您实际上到处都有范围问题。 Please review JavaScript scope.

将该行更改为 var self 或更好的 let self 以获取函数范围,而不是任何更高(全局)或先前声明的 self。

function fTable(element,options){
let self = this; // you omitted let or var here
this.$element = $(element);
this.table = $(this.$element).find('table');
this.thead = $(this.table).find('thead');
this.tbody = $(this.table).find('tbody');
this.column = options.column; // it was omitted here also but for sake of consistency, I applied column as a member to fTable.

this.defaults = {

}

//Merge default options with user options
this.options = $.extend(true, {}, this.defaults, options);
this.init();
}

fTable.prototype = {
init : function(){
let self = this; // omitted here too
this.td = $(this.$element).find('tr td:first');
$(this.td).html('<a class="add">Plus</a>');
this.bindEvents();
},

bindEvents : function(){
let self = this;
$(this.table).on('click', '.add', function(){
let $row = '<tr>';
$row += '<td></td>';

$.each(self.column, function(index, value){
$row += '<td><input type="text" value="" name='+value.name+' '+value.prop+'></td>';
});

$row += '</tr>';
$($row).appendTo(self.table);
let lastTR = $(self.tbody).find('tr:last');
$(lastTR).find('td:first').html('<a class="remove">Remove</a>');
});

$(this.table).on('click', '.remove', function(){
let row = $(self).closest('tr');
$(row).remove();
});
}
}

$.fn.fTable = function(options){
var self = this; // and here
return this.each(function(){
new fTable(self,options);
});
}

$('.crud').fTable({
column:[
{'type':'text','name':'NIK','prop':'disabled'},
{'type':'text','name':'NAME','prop':''},
]
});

$('.crud2').fTable({
column:[
{'type':'text','name':'NIK','prop':'disabled'},
{'type':'text','name':'NAME','prop':''},
]
});

关于javascript - Jquery 插件无法在多个元素上正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51510444/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com