如何将 mouseover 和 mouseout 功能转换为单击事件

Question

我想将此功能从 mouseover 和 mouseout 转换为 click 事件下面是代码。

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.. 等的锚标记上时，它会将类显示添加到一个跨度并隐藏到另一个跨度，反之亦然。

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

提前致谢

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
}