0

特定のクラスの別の要素にマウスを合わせると、要素のIDを変更する必要があります。次に、要素IDを、以前にマウスオーバーしたのと同じ要素から以前のmouseoutにあったものに戻したいと思います。

以下のコードでは、質問を明確にするために基本的なHTMLコードを提案しています。いずれかのマウスオーバーに変更<div id="Set1">したいと思います。同じ要素からのOnmouseout元の要素のIDをに戻したい。<div id="Set2"><div class="tomouseover"><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：（ネイサンの答えにクレジットが入ります）

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

Derek の回答を試すことができますが、 querksモードの IE8 または IE 7 以下ではquerySelectorがサポートされておらず、IE 8 以下ではaddEventListenerがまったくサポートされていないことがすぐにわかります。

プレーンな js の選択肢には、独自のgetElementsByClassname関数を作成する (特に難しいことではありません) か、イベント委任を使用して、イベントごとに 1 つのリスナーのみをアタッチし、単純なhasClass関数が必要になるようにすることが含まれます。

とにかく、ここに例があります：

すべての JavaScript 作成者がライブラリに含めるか、数分でコーディングできる標準ライブラリ関数の一部:

// 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 に答える
2

jQueryを使用できる場合は、マウスを上に移動したときにの id を変更し、マウスを離し#Set1たときに id に戻すコードを次に示します。#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 に答える