0

当我将鼠标悬停在特定类中的不同元素上时，我需要更改元素的 id。然后，我想将元素 id 从我之前鼠标悬停的相同元素更改回原来在 mouseout 上的内容。

在下面的代码中，我提出了一个基本的 HTML 代码来澄清我的问题。我希望更改<div id="Set1">为<div id="Set2">任何<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 任何想法！我被皇家卡住了...

4

3 回答 3

3

纯 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");
    });
}
于 2012-06-08T01:28:49.110 回答
2

如果你可以使用jQuery ，这里有一个代码，当鼠标移过时将 id 更改#Set1为鼠标移出时更改回：#Set2.tomouseover#Set1

$('.tomouseover').mouseover(function() {
    $('#Set1').attr('id','Set2');
}).mouseout(function() {
    $('#Set2').attr('id','Set1');
});​

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

希望这可以帮助！

于 2012-06-08T01:25:04.590 回答
2

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

纯 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 事件模型的未来浏览器。

于 2012-06-08T02:54:25.137 回答