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

Building html output with a input checkbox with javascript

本文关键字：复选框 html 输出 输入 javascript 构建      更新时间：2023-09-26

我正在构建一个字符串，将被放置在一个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值发送到连接的最佳实践?我把苹果和橘子混在一起了吗?哪一种方法比较快?

您的问题的直接解决方案是您在函数中使用this关键字。当您从on*属性调用函数时，函数的作用域将是window，而不是引发事件的元素。要解决这个问题，只需使用参数中提供的元素，即。$(elem)代替$(this)

一个更好的解决方案完全是使用一个不引人注目的委托事件处理程序，它可以利用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;
  });
});
相关文章：