是否有一个 javascript 函数可以找到调用者 id

Posted 2023-02-22

【中文标题】是否有一个 javascript 函数可以找到调用者 id

【英文标题】：Is there a javascript function that finds the callers id

【发布时间】：2022-01-24 02:22:47

【问题描述】：

好的，所以基本上我在 html 中使用按钮类型，例如，我有两个具有不同 id 的按钮：

<button id='Sucky27' class="btn27"></button>
<button id='Sucky28' class="btn28"></button>

按钮调用javascript函数如下：

document.getElementById("Sucky28").addEventListener("click", function() 
document.querySelector(".BuildingMenu").style.display = "flex";
)

当按下按钮时，它会打开一个建筑菜单，然后当你点击菜单中的一个项目时，即运行它的房子

document.getElementById("House").addEventListener("click", function() 
document.querySelector("function.caller.id").style.backgroundImage = "url(./download.PNG)";
)

我想知道 querySelector 是否有办法找到启动构建菜单的调用者的 id，所以如果 idsucky27 打开菜单，它会使用它的 id 并更改它的属性

我希望我解释得足够好让你理解

【问题讨论】：

事件处理程序中this 的值将是对该元素的引用。你不需要 id。

@Pointy 你是什么意思，如果你介意详细说明，因为我对 javascript 很陌生，

【参考方案1】：

事件处理程序具有通过 this 附加到的元素的上下文。

const exampleBtn = document.getElementById("example");

let clicked = false;
exampleBtn.addEventListener("click", function(evt) 
  this.style.backgroundColor = clicked ? "green" : "red";
  clicked = !clicked;
);

<button id="example">Click</button>

【参考方案2】：

如果您想要多个具有相同功能的按钮，您应该使用一个类，使用getElementsByClassName 找到它们，then loop over each 然后将状态分配给元素上的dataset。

[].forEach.call(document.getElementsByClassName('btn-coloured'), function (el) 
  el.addEventListener("click", function(evt) 
    this.style.backgroundColor = this.dataset.clicked ? "green" : "red";
    this.dataset.clicked = !this.dataset.clicked;
  )
);

<button class="btn-coloured">Click</button>
<button class="btn-coloured">Click</button>
<button class="btn-coloured">Click</button>

否则，您最终会重复按钮 2 的代码

【参考方案3】：

不知道对你有没有帮助，但是我很早以前就用过localStorage和sessionStorage来保存这种东西以备后用。

例子：

document.getElementById("Sucky28").addEventListener("click", function() 
sessionStorage.setItem('triggeredBtnId', 'Sucky28');
document.querySelector(".BuildingMenu").style.display = "flex";
)

然后：

document.getElementById("House").addEventListener("click", function() 
const triggeredBtnId = sessionStorage.getItem('triggeredBtnId');
document.querySelector(triggeredBtnId).style.backgroundImage = "url(./download.PNG)";
)

当浏览器或标签页关闭时，这个 sessionStorage 变量将被自动删除。

【讨论】：

Uncaught TypeError: Cannot read properties of null (reading 'style') 是我得到的

这太过分了（并且会在某些浏览器配置上中断）——你可以只使用一个变量。