Question

我们说我们有一个javascript函数，只要点击屏幕上的删除按钮就会设置为运行...

function deleteThis(obj) {
     /*work to delete object*/

     window.location="newurl.php";
}

$('.delete').click(function(){
    deleteThis($(this));
});
<div class='delete'>Delete</div>

现在让我们说你需要不同类型的删除按钮。他们都做了前几件事，但最后一步是不同的。我一直在做的就是......

function deleteThis(obj) {
     /*standard work to delete object*/

     if (obj.attr('type')=='a') {
        //extra work for type a
     } else if (obj.attr('type')=='b') {
        //extra work for type b
     }

     window.location="newurl.php";

}
$('.delete').click(function(){
    deleteThis($(this));
});

<div class='delete' type='a'>Delete</div>

只有几种不同的类型可以正常工作。但它开始变得有点失控。我想要的是能够做到这一点......

在我的主要javascript.js文件中：

function deleteThis(obj) {
     /*standard work to delete object*/

     /*do any extra functions that have been designated for this type*/

     window.location="newurl.php";

}
$('.delete').click(function(){
    deleteThis($(this));
});

代码仅包含在＆＃34;键入a＆＃34;按钮

$(document).ready(function(){
      /*something that tells the deleteThis() function that it should do something extra when running*/
});

这样我就不必将任何额外的变量传递给deleteThis（），我不必为不同类型的删除按钮制作不同的onclick事件。我可以只有一种删除按钮。然后在我希望删除按钮表现不同的页面上，我所要做的只是添加一些javascript代码。

这样的事情可能吗？

更新

请注意，在deleteThis（）结尾处是一个窗口重定向。这使得所有额外的点击处理程序都不会被解雇，因为我们已经离开了页面。

Answer 1

您可以使用css选择器为特定类型的按钮注册第二次单击侦听器。将按照添加的顺序调用侦听器。

$('.delete').click(function(){
    console.log("I'm called for all delete buttons");
});

$('.delete[type=a]').click(function(){
    console.log("I'm also called for all delete buttons of type a");
});

Answer 2

您可以做的一件事是使用eval()功能。

代码仅包含在＆＃34;键入a＆＃34;的页面上。按钮：

a = function() {
    // Do something extra here for the specific type a.
}

在您的主要javascript.js文件中：

function deleteThis(obj) {
    // Special function for object type triggered by eval.
    try {
        eval(obj.attr('type'))();
    } catch(e) {}

    // Standard work here.
    window.location="newurl.php";

}

将功能传递给页面加载功能

2 个答案: