요소 ID 변경 onmouseover/onmouseout 클래스의 모든 요소

Question

특정 클래스에서 다른 요소를 마우스로 이동할 때 요소의 id를 변경해야합니다. 그런 다음 이전에 마우스를 놓은 동일한 요소의 mouseout에서 요소 ID를 다시 변경하려고합니다.

아래 코드에서 내 질문을 명확하게하기 위해 기본 HTML 코드를 작성합니다. <div id="Set1">을 <div id="Set2"> onmouseover <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

당신은 데릭의 답변을 시도 할 수 있지만 곧 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 이벤트 모델 중 하나입니다 미래의 브라우저에서 작동 할 것입니다.

Answer 2

당신이 jQuery를 사용할 수 있다면 ... 국왕 붙어있어, 여기에 마우스를 #Set1 다시 .tomouseover 및 변경 위로 이동하면 #Set2에 #Set1의 ID를 변경하는 코드는 때 마우스 아웃 :

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

js 예 : http://jsfiddle.net/XNu5H/

희망이 있습니다.

Answer 3

순수 자바 스크립트 : (신용 나단의 대답에 간다)

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