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'));

返回或发送变量到onchange事件

4 个答案: