javascript - 如何将这些相似的功能合并为一个

Question

我一直在尝试围绕 Javascript 进行思考，一直在寻找一种方法将其变成一个仅影响当前悬停的 DOM 元素（我也通过 createElement 使用 javascript 创建）的函数。我尝试了 .target 和 currentTarget 的东西，没有用。如果有人能尽可能多地为我指明正确的方向，我将永远感激不尽！

/* This first function is the experimental one, I tried this but to no avail */
function displayTooltip1(tt) {
    var x = tt.currentTarget;
    x.style.cssText = "width: 100px; height: 100px; display: inline-block; margin: 0;1.5px 0 1.5px; overflow: visible;"
}

function displayTooltip2() {
    document.getElementById('image2').style.cssText = "width: 100px; height: 100px; display: inline-block; margin: 0 1.5px 0 1.5px; overflow: visible;";
}

function displayTooltip3() {
    document.getElementById('image3').style.cssText = "width: 100px; height: 100px; display: inline-block; margin: 0 1.5px 0 1.5px; overflow: visible;";
}

Answer 1

只需传递组件的 id 并通过该 id 获取组件。

使用如下：

function displayTooltip(componentId) {
    document.getElementById(componentId).style.cssText = "width: 100px; 
    height: 100px; display: inline-block; margin: 0 1.5px 0 1.5px; overflow: visible;";
    }

Answer 2

正如我所看到的，你所有的函数都做同样的事情，但是使用不同的元素，所以你可以创建一个函数，它将接受元素的 ID 并使用该元素进行样式更改：

function displayTooltip(id){
    document.getElementById(id).style.cssText = "width: 100px; 
    height: 100px; display: inline-block; margin: 0 1.5px 0 1.5px; overflow: visible;";
}

displayTooltip(tt);
displayTooltip('image2');
displayTooltip('image3');