Question

我创建了一个制作按钮的功能，因为我必须制作几个：

makeButton(function(flag = true), "text")

参数是它将调用“onclick”的函数以及将在按钮上显示的文本。

现在我有两个调用相同的函数但是我希望函数在一个方式中以一种方式运行，如果另一方调用则以其他方式运行。

我试图像这样调用函数：

if(flag == true) doSomething;
else doSomethingElse;

然后在函数中：

makeButton(function(flag = true), "text")

也许这不起作用，但问题是我创建这样的按钮时：

if(buttonA) do something;
if(buttonB) do somethingElse;

它在创建按钮时执行该功能，我希望它只执行onclick。

我认为在函数中的其他事情：

function makeButton(function, text){
  var button = document.createElement('BUTTON');
  var btTxt = document.createTextNode(text);
  button.style.color = '#006633';
  button.style.fontWeight = 'bold';
  button.onclick = function;
  button.appendChild(btTxt);
  button.style.margin = '5px';
  document.body.appendChild(button);
}

但是我需要函数来知道哪个按钮调用了它......

你有什么建议以其他方式这样做吗？请只使用简单的JavaScript！

该功能如下所示：

to_fix := 1629246124;
PKZip := 1347093252;

Answer 1

您的功能已经知道通过this关键字触发了哪个按钮。您可以在this JSFiddle（打开控制台）上看到，只需在绑定函数中使用this关键字，我们就可以看到该函数知道哪个按钮点击了它。

var buttonFunctionOne = function() {
    console.log(this);
}
var buttonFunctionTwo = function() {
    console.log(this);
}

makeButton(buttonFunctionOne,'button one');
makeButton(buttonFunctionOne,'button two');
makeButton(buttonFunctionTwo,'button three');

数据的最新解决方案是使用data-*属性将其绑定到元素，而不是将函数与参数绑定。看到working example here，再次打开控制台。

function makeButton(functionIn, text, flag){
  var button = document.createElement('BUTTON');
  var btTxt = document.createTextNode(text);
  button.onclick = functionIn;
  button.setAttribute('flag', flag); # flag now set as a data attribute
  button.appendChild(btTxt);
  document.getElementById('js-out').appendChild(button);
}

var buttonFunctionOne = function() {
    console.log(this);
}
var buttonFunctionTwo = function() {
    console.log(this);
}

# flag state passed into make button as a third param
makeButton(buttonFunctionOne,'button one', '1');
makeButton(buttonFunctionOne,'button two', '0');
makeButton(buttonFunctionTwo,'button three', '1');

现在您有一个独立的标识符可用于您的元素以及this关键字，这将使您可以访问所单击按钮所特有的所有继承函数和值。

PS，我从js中取出了你的硬编码样式，不推荐超出本答案范围的原因（将样式存储在css的类选择器中，并使用js从元素中添加和删除此类）。 See here了解如何在纯JavaScript中操作类。

Answer 2

您想要传递包装函数。

假设你的＆＃34;实际＆＃34;函数称为handler()：

function handler(flag) {
  if (flag) {
    // etc.
  }
}

你可以这样做：

makeButton( function() { handler(true);  }, "button A");
makeButton( function() { handler(false); }, "button B");

这些匿名函数将在各自的按钮上点击。

Answer 3

如你所说，代码：

makeButton(myFunction(flag = true), "text")

不适合用途，因为它执行函数而不是将其作为参数传递。而是使用bind()函数：

makeButton(myFunction.bind(null, true), "text")

这会将你的onclick函数作为参数传递，第一个参数设置为true。这可以作为你的旗帜：

function myFunction (flag) {
    if (flag) //do something
    else //do something else
}

Answer 4

您可以使用event.target获取已点击按钮的信息。然后，您可以访问id，或点击按钮的任何属性。

function handler(){
    console.log(event.target);
}

两个按钮调用相同的功能，如何知道调用哪个按钮

4 个答案: