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等的锚标签时，它会将鼠标显示添加到一个范围，并在鼠标输出中隐藏到其他范围，反之亦然。

因此，如果可以将此功能转换为click事件而不是mouseover和mouseout。

先谢谢

Answer 1

我假设您想要在每次点击时切换。

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

然后我将"show"和"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
}

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

1 个答案: