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

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

如果在mouseout你只想删除颜色，请考虑：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用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 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指定函数的源和目标？

3 个答案: