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)。

一个更好的解决方案是使用一个不显眼的委托事件处理程序，它可以在您尝试时使用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;
  });
});

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

1 个答案: