如何生成一个动态onclick，该单击传递多个值对函数

Question

我需要将多个值从 onclick属性传递到函数。因此，我需要以这种方式格式化onclick onclick='getLine("1","text");'

//Ajax call with dynamic onclick
$.ajax({
  url: 'data/tiles-personal.json',
  dataType: 'json',
  type: 'get',
  cache: false,
  success: function(pdata) {
    $(pdata.tile).each(function(index, value) {
      console.log(value.name, value.id, +'States(' + value.states + ')');
      if (value.name == "MA Auto (Stand Alone)" || value.name == "USLI Events" || value.name == "USLI Personal Lines") {
        document.getElementById("rowP").innerHTML = "<div class='filterrowP' data-state='" + value.states + "'><div class='col-sm-4' style='background-color:#FFFFFF;'>" + "<span class='sm-4-corner'>Coming soon</span>" + "<div name='footprintinfo' class='footprintinfo' style='position:absolute;left:122px;z-index:200;'><a href='##' title='" + value.name + "'><i class='fa fa-info-circle' aria-hidden='true'></i></a>" + "</div><a href='#' onclick='getLine(1," + value.name + ")' class='href-nav'><img src=images/" + value.image + " border='0' class='ind' title='" + value.name + "'/>" + "<div class='tiles-t'>" + value.name + "</div></a></div></div>";
      } else {
        document.getElementById("rowP").innerHTML = "<div class='filterrowP' data-state='" + value.states + "'><div class='col-sm-4' style='background-color:#FFFFFF;'>" + "<div name='footprintinfo' class='footprintinfo' style='position:absolute;left:122px;z-index:200;'><a href='##' title='" + value.name + "'><i class='fa fa-info-circle' aria-hidden='true'></i></a>" + "</div><a href='#' onclick='getLine(1,none);' class='href-nav'><img src=" + value.image + " border='0' class='ind' title='" + value.name + "' />" + "<div class='tiles-t'>" + value.name + "</div></a></div></div>";
      }
    });
  }
});
//function that receives the onclick values
function getLine(initValue, initTxt) {}

<!-- div that displays the json data -->
<div id="rowP" class="rowP" style="padding-left: 30px;"></div>

Answer 1

不要使用内联事件处理程序或样式。当他们将HTML和CSS/JS逻辑绑在一起时，它们是不良的做法，这与您想要的相反。

相反，将唯一数据放在元素上的 data属性中，然后在委派的事件处理程序中读取。

还要注意，您的代码在循环的每一个迭代中都在覆盖innerHTML，因此只能看到最后一项。您应该考虑将新内容附加到这样的东西：

<div id="rowP" class="rowP"></div>

var $row = $('#rowP');
$.ajax({
  url: 'data/tiles-personal.json',
  dataType: 'json',
  type: 'get',
  cache: false,
  success: function(pdata) {
    pdata.tile.forEach(function(tile) {
      $row.append(`<div class="filterrowP" data-state="${value.states}"><div class="col-sm-4"><span class="sm-4-corner">Coming soon</span><div name="footprintinfo" class="footprintinfo"><a href="#" title="${value.name}"><i class="fa fa-info-circle" aria-hidden="true"></i></a></div><a href="#" data-name="${value.name}" class="href-nav"><img src="images/${value.image}" border="0| class="ind" title="${value.name}" /><div class="tiles-t">${value.name}</div></a></div></div>`);
    });
  }
});
$row.on('click', '.href-nav', function() {
  var name = $(this).data('name');
  // your logic here...
});

#rowP {
  padding-left: 30px;
}
.filterrowP {
  background-color: #FFFFFF;
}
.footprintinfo {
  position: absolute;
  left: 122px;
  z-index: 200;
}