如何将鼠标悬停和鼠标悬停功能转换为单击事件

Question

我想将此功能从鼠标悬停和鼠标悬停转换为单击事件以下代码。

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滑件，滑件，滑件3 ..等用户鼠标悬停定位标记它添加类节目，以一个跨度，并隐藏到其他反之亦然在mouseout中。

因此，如果可以将此功能转换为单击事件而不是鼠标悬停和鼠标悬停。

在此先感谢

Answer 1

我假设你想切换每次点击。

在这里，我在一个单独的函数中执行处理程序赋值，以便每个处理函数都可以访问它自己的局部变量。

然后我把"show"和"hide"在函数中的数组，并在每个点击阵列反转，并且使用.apply调用它传递给changeText。

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 
}