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

当鼠标悬停在特定类中的不同元素时，需要更改元素的ID。然后，我想要将元素ID更改回到之前在鼠标悬停时所用的元素，这与之前我所挖掘的元素相同。更改元素ID onmouseover/onmouseout类中的任何元素

在下面的代码中，我提出了一个基本的HTML代码来阐明我的问题。我希望将<div id="Set1">更改为<div id="Set2"> onmouseover的任何<div class="tomouseover">。从同一元素开始，我希望将原始元素的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对任何想法！我庄严卡...

来源

2012-06-08 Wagtail

你可以使用jQuery吗？ –

我不喜欢。这是在Google小工具中。如果我不得不去，我可以。 – Wagtail

您可以尝试德里克的答案，但你很快就会发现，querySelector不怪癖模式或IE 7和更低的IE8的支持，那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事件模型的工作。

来源

2012-06-08 02:54:25 RobG

哇。这对我的代码来说太过分了，但我会给它一个机会！感谢您指出这一点 - 我没有注意到... – Wagtail

仅供参考，YouTube也不支持IE 8。 –

@wagtail - 为你搞笑的漫画：http://i.stack.imgur.com/5szcw.png –

如果你可以使用jQuery，这里是当鼠标移过.tomouseover和更改回#Set1改变的#Set1 ID，以#Set2代码，当你的鼠标了：

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

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

希望这有助于！

来源

2012-06-08 01:25:04 Nathan

你可以把它转换成JavaScript：D – Wagtail

@wagtail - 看到我的答案，如果它是你想要的。 –

@wagtail它已经是JavaScript了，但是jQuery。 – Nathan

纯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-08 01:28:49

这很酷德里克。一天内有两个答案！努力提高评分？ – Wagtail

'：D' –

+1。我甚至不知道在纯JavaScript LOL中存在一个叫做document.querySelectorAll（）的东西。我一直使用jQuery，并且忘记了很多纯JavaScript的东西。 – Nathan

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

回答

相关问题