1

この機能をマウスオーバーとマウスアウトからクリックイベントに変換したいのは、以下のコードです。

var IdAry=['slide2','slide3','slide4','slide5','slide8','slide9','slide12','slide13','slide14','slide15','slide16'];
window.onload=function() {
 for (var zxc0=0;zxc0<IdAry.length;zxc0++){
  var el=document.getElementById(IdAry[zxc0]);
  if (el){
   el.onmouseover=function() {
     changeText(this,'hide','show')
    }
   el.onmouseout=function() {
     changeText(this,'show','hide');
    }
  }
 }
}
function changeText(obj,cl1,cl2) {
   obj.getElementsByTagName('SPAN')[0].className=cl1;
   obj.getElementsByTagName('SPAN')[1].className=cl2;
}

以下はHTML部分です

<div id="graphics">
                    <img src="images/circle-bg.jpg" alt="" class="circleBg"/>
                    <div class="row1">
                        <a href="#" id="slide1" id="selectedSlide">
                            <span id="span1"></span>
                            <span class="hide"></span>
                        </a>
                        <a href="#" id="slide2">
                            <span id="span1"></span>
                            <span class="hide">At this stage, we sit down together and discuss your life goals and begin to develop a plan for funding them. Without knowing where you want to go, we can't help get you there! This is the time to ask a lot of questions and get to know each other. </span>                      
                        </a>
                        <a href="#" id="slide3">
                            <span id="span1"></span>
                            <span class="hide">We need to know your current income and expenses in order to gain a better understanding of resources that can be applied toward your financial goals. We also determine the appropriate size of your emergency fund. </span>
                        </a>
                        <a href="#" id="slide4">
                            <span id="span1"></span>
                            <span class="hide"></span>                      
                        </a>
                    </div>
                </div>

現在、ユーザーが id slide1、slide2、slide3 などのアンカー タグをマウスオーバーすると、show クラスが 1 つのスパンに追加され、hide クラスが別のスパンに追加され、マウスアウトではその逆になります。

したがって、この機能をマウスオーバーとマウスアウトの代わりにクリックイベントに変換できる場合。

前もって感謝します

4

1 に答える 1

2

クリックするたびに切り替えたいと思います。

ここでは、個別の関数でハンドラーの割り当てを行い、各ハンドラーが独自のローカル変数にアクセスできるようにします。

次に、その関数内の配列に and を配置し、クリックするたびに配列を逆にして、それを呼び出すために"show"usingに渡します。"hide"changeText.apply

var IdAry = ['slide2', 'slide3', 'slide4', 'slide5', 'slide8', 'slide9', 'slide12', 'slide13', 'slide14', 'slide15', 'slide16'];
window.onload = function () {
    for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) {
        var el = document.getElementById(IdAry[zxc0]);
        if (el) {
            setUpHandler(el);
        }
    }
}

function setUpHandler(el) {
    var state = ["show", "hide"];

    el.onclick = function () {
        changeText.apply(this, this, state.reverse());
    }
    el = null;
}

function changeText(obj, cl1, cl2) {
    obj.getElementsByTagName('SPAN')[0].className = cl1;
    obj.getElementsByTagName('SPAN')[1].className = cl2;
}

クリックするたびに短い配列を逆にするという考えが気に入らない場合は、代わりにこれを行うことができます...

function setUpHandler(el) {
    var ab = true;

    el.onclick = function () {
        ab = !ab
        changeText(this, 
                   ab ? "show" : "hide", 
                   ab ? "hide" : "show");
    }
    el = null;
}

function changeText(obj, cl1, cl2) {
    obj.getElementsByTagName('SPAN')[0].className = cl1;
    obj.getElementsByTagName('SPAN')[1].className = cl2;
}

または、jQueryにタグを付けたので、これを行うことができます...

$("#" + IdAry.join(",#")).toggle(function() { changeText(this, "hide", "show"); }),
                                 function() { changeText(this, "show", "hide"); }));

var prev;

function changeText(obj, cl1, cl2) {

    obj.getElementsByTagName('SPAN')[0].className = cl1;
    obj.getElementsByTagName('SPAN')[1].className = cl2;

    if (prev && obj !== prev) {
        prev.getElementsByTagName('SPAN')[0].className = "";
        prev.getElementsByTagName('SPAN')[1].className = "";
    }
    prev = obj
}
于 2012-08-08T12:17:57.003 に答える