javascript - 使用 javascript 构建带有输入复选框的 html 输出

Question

我正在构建一个字符串，该字符串将以语法方式放置在 div 程序中。我试图调用输入复选框的 onclick 属性，但遇到了一些麻烦。我试图在每次单击复选框时传递一个唯一值 id。下面的代码是我正在使用的。请参阅下面的问题:

var count = 1;
$.each(JSON.parse(data.d), function (k, v) {
    var searchName = v.searchName;
    resultString += "<div class='row form-group'>";
    resultString += "<div class='col-sm-1 right-content'><input type='checkbox' onclick = 'authorCheckboxclick(this)' id='" + searchName + "'></div>";
    resultString += "<div class='col-sm-11'>";
    resultString += "<span>";
    //resultString +=  v.text   
    resultString += count + ". " + v.text
    resultString += "</span>";
    resultString += "<br />";
    resultString += "<span>";
    //resultString += "Consectetur adipisicing, Consequatur, 2015.";
    resultString += "</span>";
    resultString += "</div>";
    resultString += "</div>";
    //resultString += "<br><br>";
    count++;
});

在 authorCheckboxclick 函数中，如果我输入 var answerid = $(this).attr('id'); 我会得到未定义的结果。

function authorCheckboxclick(elem) {
    var answerid = $(this).attr('id');
    alert(answerid);  //I get undefined
    var answerid = $(this).attr(elem.id);
    alert(answerid); //I get undefined
    var answerid = $(this).attr(elem.id);
    alert(answerid); //I get undefined
    var searchTerm = elem.id;
    alert(searchTerm); //I get proper value
    searchTerm = searchTerm.substring(0, 3);
    alert(searchTerm); //I get proper value
    var answerid = $(this).attr(elem.id);
    alert(answerid); //I get undefined


    var search = searchTerm.toUpperCase();
    var array = jQuery.grep(dataMembers, function (value) {
        return value.toUpperCase().indexOf(search) >= 0;
    });

是否有原因导致我的 jQuery 调用无法正常工作而我的 JavaScript 却正常工作？是否有将 id 值发送到结点的最佳实践？我要把苹果和橙子混合在一起吗？哪种方法显示速度更快？

Answer 1

解决问题的直接方法是在函数中使用 this 关键字。当您从 on* 属性调用该函数时，该函数的范围将是 window，而不是引发事件的元素。要解决此问题，只需使用您在参数中提供的元素即可，即。 $(elem) 而不是 $(this)。

更好的解决方案是使用一个不显眼的委托(delegate)事件处理程序，它可以在您尝试时利用 this 关键字。它还具有留下更干净的 HTML 代码和更好地分离关注点的好处。试试这个:

var count = 1;
$.each(JSON.parse(data.d), function(k, v) {
  var searchName = v.searchName;
  resultString += '<div class="row form-group">' +
    '<div class="col-sm-1 right-content"><input type="checkbox" id="' + searchName + '"></div>' +
      '<div class="col-sm-11">' +
        '<span>' + count + ". " + v.text + '</span><br />' +
        '<span></span>' +
      '</div>' +
    '</div>';
  count++;
});

$(document).on('change', '.row :checkbox', function() {
  var answerid = this.id;
  var search = searchTerm.toUpperCase();
  var array = jQuery.grep(dataMembers, function(value) {
    return value.toUpperCase().indexOf(search) >= 0;
  });
});