如何使用 JavaScript 在函数上指定源和目标？

Question

我需要这个函数来在鼠标悬停在按钮上时更改窗体的边框颜色。我得到了预期的结果，但是该功能影响了所有页面表单。我想确定哪个按钮影响每个表单。

如何在函数中指定源 ID 和目标 ID？

<head>
    <script>
        function chbg(color) {
            document.getElementById('b').style.backgroundColor = color;
            document.getElementById('d').style.backgroundColor = color;
        }
    </script>
</head>

<body>
    <div id="a" onmouseover="chbg('red')" onmouseout="chbg('white')">A - This should effect B only</div>
    <div id="b">B - This is neutral</div>
    <div id="c" onmouseover="chbg('blue')" onmouseout="chbg('white')"> C - This should effect D only</div>
    <div id="d">D - This is neutral</div>
</body>

更新：

已解决！谢谢大家的帮助。

View solution

Answer 1

您可以使用 this 将目标元素传递给函数。

首先更改您的函数以接受一个元素作为参数：

function chbg(elem, color) {
    elem.style.backgroundColor = color;
}

然后更改 HTML 以使用 this 关键字传递元素。

<div id="a" onmouseover="chbg(this, 'red')" onmouseout="chbg(this, 'white')">A - This should effect B only</div>

JSFiddle example

但是，对于悬停，您确实应该使用 CSS 来更改背景。例如：

#a:hover {background-color: red;}

Answer 2

您可以使用自定义 data-* 属性指定目标：

function chbg(e) {
  document.querySelector(this.dataset.chbgTarget)
  .style.backgroundColor = this.dataset[
    'chbgColor' + (e.type == 'mouseover' ? 'Over' : 'Out')
  ];
}
var els = document.querySelectorAll('.chbg');
for(var i=0; i<els.length; ++i) {
  els[i].addEventListener('mouseover', chbg);
  els[i].addEventListener('mouseout', chbg);
}

<div id="a" class="chbg"
     data-chbg-color-over="red"
     data-chbg-color-out="white"
     data-chbg-target="#b">
  A - This should effect B only
</div>
<div id="b">B - This is neutral</div>
<div id="c" class="chbg"
     data-chbg-color-over="blue"
     data-chbg-color-out="white"
     data-chbg-target="#d">
  C - This should effect D only
</div>
<div id="d">D - This is neutral</div>

如果在 mouseout 时你只想删除颜色，考虑这个：

function chbg(e) {
  document.querySelector(this.dataset.chbgTarget)
  .style.backgroundColor =
    e.type == 'mouseover' ? this.dataset.chbgColor : '';
}
var els = document.querySelectorAll('.chbg');
for(var i=0; i<els.length; ++i) {
  els[i].addEventListener('mouseover', chbg);
  els[i].addEventListener('mouseout', chbg);
}

<div id="a" class="chbg"
     data-chbg-color="red"
     data-chbg-target="#b">
  A - This should effect B only
</div>
<div id="b">B - This is neutral</div>
<div id="c" class="chbg"
     data-chbg-color="blue"
     data-chbg-target="#d">
  C - This should effect D only
</div>
<div id="d">D - This is neutral</div>

Answer 3

直截了当，通过向函数添加额外参数：

function chbg(color, source, target) {
    document.getElementById(source).style.backgroundColor = color;
    document.getElementById(target).style.backgroundColor = color;
}

用法示例：

<div id="a" onmouseover="chbg('red', 'a', 'b')" onmouseout="chbg('white', 'a', 'b')">A - This should effect B only</div>
<div id="b">B - This is neutral</div>
<div id="c" onmouseover="chbg('blue', 'c', 'd')" onmouseout="chbg('white', 'c', 'd')"> C - This should effect D only</div>
<div id="d">D - This is neutral</div>

如何使用 JavaScript 在函数上指定源和目标？

How to specify a source and a target on the function using JavaScript?

html

javascript

mousehover