javascript - 返回或发送变量到 onchange 事件

Question

我试图从两个单独的事件中实现相同的函数功能。所以我创建的函数是：

function adding_stuff() {
    var names = [];
    var dates = [];
    for(var i = 0; i < this.files.length; i++) {
        //adding stuff to names and dates
    }
    $(".primary .panel-content").append("<ul class='list-unstyled'></ul>");
    for(var i in names) {
        var li = "<li>";
        $(".primary .panel-content ul").append(li.concat(names[i]))
    }
}

有两个按钮primary和secondary。我希望这两个功能具有相同的功能，但输出不同<div>。当前选择<div>的是".primary"，但是我希望这取决于已单击的按钮。

该功能使用以下方式触发：

$("#primary").onchange = adding_stuff;
$("#secondary").onchange = adding_stuff;

注意： primary和secondary是类型的输入file。

Answer 1

您可以在注册回调时添加其他数据，这些数据将在事件处理程序中可用：

$('#primary').on('change', { target: '.primary' }, adding_stuff);
$('#secondary').on('change', { target: '.secondary' }, adding_stuff);

然后在处理程序中：

function adding_stuff(ev) {
    var cls = ev.data.target;  // extract the passed data
    ...
    // file handling code omitted

    $(".panel-content", cls).append(...)
}

Answer 2

使用 jquery 的change()事件

function adding_stuff(obj,objClass) {
var names = [];
var dates = [];
for(var i = 0; i < obj.files.length; i++) {
  //adding stuff to names and dates
}
$("."+ objClass+" .panel-content").append("<ul class='list-unstyled'></ul>");
for(var i in names) {
    var li = "<li>";
    $("."+ objClass+" .panel-content ul").append(li.concat(names[i]))
}
}

$("#primary").change(function(){
   adding_stuff(this,'primary');
});
$("#secondary").change(function(){
    adding_stuff(this,'secondary');
});

Answer 3

您可以$(this).attr("class")在函数内部使用。它将返回触发事件的按钮类。

function adding_stuff() {
var div = $(this).attr("class");
var names = [];
var dates = [];
for(var i = 0; i < this.files.length; i++) {
    //adding stuff to names and dates to $div
}
$(div + " .panel-content").append("<ul class='list-unstyled'></ul>");
for(var i in names) {
    var li = "<li>";
    $(div + " .panel-content ul").append(li.concat(names[i]));
}
}

Answer 4

尝试

function adding_stuff(opselector) {
    return function() {
        var names = [];
        var dates = [];
        for (var i = 0; i < this.files.length; i++) {
            // adding stuff to names and dates
        }
        var ul = $("<ul class='list-unstyled'></ul>").appendTo(opselector)
        for (var i in names) {
            ul.append("<li>" + li.concat(names[i]) + "</li>")
        }
    }
}

$("#primary").change(adding_stuff('.primary .panel-content'));
$("#secondary").change(adding_stuff('.secondary .panel-content'));