如何在 html 中使用“this”关键字在对象上调用方法

How do you invoke a method on an object using the "this" keyword in html?

本文关键字：关键字 对象 调用 方法 this html      更新时间：2023-09-26

我正在尝试在表中显示一个数据库，允许用户在单击时编辑每条记录。 我有一个构造函数创建一个数据库对象。 我正在循环访问我的数据库以显示它。这是代码的一部分：

    for (var j = 1; j <this.data.length; j++) {
        var html = '<div id="this.data[j] + '"';
        html += 'onclick="this.edit_record ('''+this.data[j]+''')">'+this.data[j]+'</div>'; 
    }
    $("#table").append(html);

调用this.edit_record不起作用。 我该如何纠正它？谢谢。

没有必要

在html本身中编写onclick。

你可以这样处理它：

请参阅有关代码的注释。

for (var j = 1; j <this.data.length; j++) {
    // create html
    var html = '<div id="' + this.data[j] + '"';
    html += this.data[j] + '</div>'; 
    // create new jQuery element
    var e = $(html);
    // set click handler.
    var self = this; // closure for this
    (function(x) { // iterator closure for j
      e.click(function() {
        self.edit_record(self.data[x])
      });
    })(j);
    // append element.
    $("#table").append(e);
}


function Demo() {
  this.data = ["foo", "bar", "baz"];
  this.edit_record = function(data) {
    alert(data);
  }
  for (var j = 0; j < this.data.length; j++) {
    // create html
    var html = '<div id="' + this.data[j] + '">';
    html += this.data[j] + '</div>';
    // create new jQuery element
    var e = $(html);
    // set click handler.
    var self = this; // closure for this
    (function(x) { // iterator closure for j
      e.click(function() {
        self.edit_record(self.data[x])
      });
    })(j);
    // append element.
    $("#table").append(e);
  }
  return this;
}
var demo = new Demo();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table">
</div>

onclick 中的this引用单击的元素。当你使用jquery时，最好的事情是这样的：

  var html="", mythis=this; // save "this" (your object) context 
  for (var j = 1; j <this.data.length; j++) {
        html += '<div data-id="'+this.data[j] + '">'+this.data[j]+'</div>'; 
  }
  $("#table").append(html); // append all html at once, faster!
  // assign a click handler to all divs children of #table
  $("#table>div").click(function() {
     // inside this function, this is the clicked element (so this.getAttribute("data-id") would be the id
     // and mythis would be the saved this (your object)
     mythis.edit_record(this.getAttribute("data-id")); 
  });

您可以按照自己的方式为您的对象分配全局变量，然后像onclick="mysavedthis.edit_record..."一样编写 HTML onclick，但由于您已经在使用 jquery，因此最好以编程方式分配点击处理程序，因为这样它就不那么脆弱了（您不需要对引号进行编码，考虑 data[] 有引号的情况，使用全局变量......

请注意，我没有分配" id "，而是分配了data-id.这是因为 ID 必须是唯一的，因此要 100% 符合标准并支持 data[] 数组中的重复值，只需选择另一个属性名称而不是 id。该约定建议对用户定义的属性使用 data- 前缀。

您似乎缺少一个引号。更新了我的答案以解决此问题

var parent = this;
for (var j = 0; j < this.data.length; j++) {
    var currentValue = this.data[j];
    var html = '<div id="' + currentValue + '"';
    html += '>' + currentValue + '</div>'; 
    $('#table').append(html);
    $('#'+currentValue).click(function(){
       parent.edit_record ($(this).attr("id"));
    });
}

以下是小提琴链接 http://jsfiddle.net/zeskysee/pxgpzspn/

相关文章：