Question

当我将鼠标悬停在特定类中的其他元素时，我需要更改元素的id。然后，我想要将元素id更改为之前在鼠标输出上的内容，这是我之前使用的相同元素。

在下面的代码中，我提出了一个基本的HTML代码来澄清我的问题。我希望将<div id="Set1">更改为<div id="Set2"> onmouseover of any <div class="tomouseover">。来自同一元素的Onmouseout我希望将原始元素的id更改回<div id="Set1">。

<div id="Set1">Div to change id</div>
<div class="tomouseover">Mouse over to change Set1 to Set2</div>
<div class="tomouseover">Mouse over to change Set1 to Set2</div>

+1给任何想法！我被卡住了......

Answer 1

Pure JavaScript :(归功于Nathan的回答）

var ele = document.querySelectorAll(".tomouseover");
for(var i=0; i < ele.length; i++){
    ele[i].addEventListener("mouseover", function(){
        document.querySelector("#Set1").setAttribute("id", "Set2");
    });
    ele[i].addEventListener("mouseout", function(){
        document.querySelector("#Set2").setAttribute("id", "Set1");
    });
}

Answer 2

如果您可以使用jQuery，则此代码会在鼠标移至#Set1并更改回{{1}时将#Set2的ID更改为.tomouseover鼠标移出时：

#Set1

jsFiddle示例：http://jsfiddle.net/XNu5H/

希望这有帮助！

Answer 3

您可以尝试Derek的答案，但很快就会发现IE8在怪癖模式或IE 7及更低版本中不支持 querySelector ，并且不支持 addEventListener IE 8和更低。

普通js的选择包括编写自己的 getElementsByClassname 函数（并不是特别困难）或使用事件委托，这样你只为每个事件附加一个监听器，并且需要一个简单的 hasClass 功能。

无论如何，这是一个例子：

任何javscripter应该在库中具有的标准库函数，或者能够在几分钟内编写代码：

// Minimalist addEvent function, ok for the current web
function addEvent(el, fn, evt) {
  if (el.addEventListener) {
    el.addEventListener(evt, fn, false) 
  } else if (el.attachEvent) {
    el.attachEvent('on' + evt, fn);
  } 
}

// Returns true or false depending on whether element el has class classname
function hasClassname(el, classname) {
  var re = new RegExp('(^|\\s)' + classname + '(\\s|$)');
  return re.test(el.className); 
}

完成工作的功能：

// Toggle the id. Note that this deals with the case where
// the element to toggle isn't found to prevent errors being thrown
function toggleId(e) {
  e = e || window.event;
  var el = e.target || e.srcElement;
  var o;

  if (hasClassname(el, 'tomouseover')) {

    if (e.type == 'mouseover') {
      o = document.getElementById('set1');

      if (o) o.id = 'set2';

    } else if (e.type == 'mouseout') {
      o = document.getElementById('set2');

      if (o) o.id = 'set1';
    }
  }
}

// Attach the listener onload, could also add from a bottom
// script or inline. If inline, use `toggleId(event)`
window.onload = function() {
  addEvent(document.body, toggleId, 'mouseover');
  addEvent(document.body, toggleId, 'mouseout');
}

以上内容适用于所有浏览器，返回IE6和NN 3左右，并将继续在未来的W3C或IE事件模型浏览器中运行。

更改元素ID onmouseover / onmouseout类中的任何元素

3 个答案: