Question

我有两个不同的例子，一个具有鼠标悬停功能，另一个具有点击事件功能，但现在我想在一起下面的描述：

鼠标悬停示例链接： http://wheaton.advisorproducts.com/investment-advisory

鼠标单击示例： http://ivyfa.advisorproducts.com/financial-planning-process

要求是这样的

在此示例中（http://ivyfa.advisorproducts.com/financial-planning-process）现在鼠标悬停功能正在运行，但现在我需要以下功能：

当用户将鼠标移到图像上时，对于漏斗和圆圈示例，中心相关文本将会显示。
如果用户点击任何图片部分，则每次用户点击其他图片或部分时，其相关文字都会显示。
当用户鼠标悬停在diif-2图像部分时，随着此点击事件，当用户将鼠标移出圆圈时，也会显示相关文本，然后显示所选文本。

最后我想合并两个例子

解释这个例子非常复杂，对不起:(

以下是用于鼠标悬停功能的js代码：

/*-----Only for hove over image -show hide text------*/
var IdAry=['slide1','slide2','slide3','slide4'];
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;
}

以下是用于点击事件功能的js代码：

/*----------Text change on click - Our Process page---------------*/
var prev;
var IdAry = ['slide1', 'slide2', 'slide3', 'slide4'];
window.onload = function () {
    for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) {
        var el = document.getElementById(IdAry[zxc0]);
        if (el) {
            setUpHandler(el);
            el.onmouseover = function () {
                changeText(this,'hide','show')
            }
            el.onmouseout = function () {
                changeText(this,'show','hide');
            }
        }
    }
}


/*---------This is used to add selected class on clicked id only and remove class selected from rest---------*/

function setUpHandler(el) {
$("#" + IdAry.join(",#")).click(function () {
    $(this).addClass("selected");
    $("#graphics .selected").not(this).removeClass("selected");
})

/*---------This will add show hide class to thier spans and vise versa-------*/

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


function changeText(obj, cl1, cl2) {

    obj.getElementsByTagName('SPAN')[0].className = "hide";
    obj.getElementsByTagName('SPAN')[1].className = "show";

    if (prev && obj !== prev) {
        prev.getElementsByTagName('SPAN')[0].className = "show";
        prev.getElementsByTagName('SPAN')[1].className = "hide";
    }
    prev = obj
}


function clearSelection() {
    if (window.getSelection) window.getSelection().removeAllRanges();
    else if (document.selection) document.selection.empty();
}

由于苏希尔

Answer 1

您可以为同一作业添加多个事件名称：

$(document).on('mouseover click', '.yourObject', function (event) {
    if (event.type === "mouseover") {
        // Mouse-Over code here
    } else if (event.type === "click") {
        // Click code here
    }
});

另外，请尝试使用addEventListener代替el.onmouseout=function(){...}等硬编码事件使用方法：

el.addEventListener("mouseout", function () {...});

如果需要的话，那将更容易管理事件（例如删除它们）。

Answer 2

您可以使用

将多个事件添加到DOM

$(document).on('mouseover','.yourObject', function(){ //over code })
           .on('click', '.yourObject', function() { //click code});

Answer 3

您的代码存在的问题是您正在设置window.onload两次。由于您使用的是jQuery，因此可以通过绑定document.ready事件来使其工作。

//first sample
(function($){
/*-----Only for hove over image -show hide text------*/
var IdAry=['slide1','slide2','slide3','slide4'];
$(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;
}
}(jQuery));

//second sample
(function($){
/*----------Text change on click - Our Process page---------------*/
var prev;
var IdAry = ['slide1', 'slide2', 'slide3', 'slide4'];
$(function () {
    for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) {
        var el = document.getElementById(IdAry[zxc0]);
        if (el) {
            setUpHandler(el);
            el.onmouseover = function () {
                changeText(this,'hide','show')
            }
            el.onmouseout = function () {
                changeText(this,'show','hide');
            }
        }
    }
});


/*---------This is used to add selected class on clicked id only and remove class selected from rest---------*/

function setUpHandler(el) {
$("#" + IdAry.join(",#")).click(function () {
    $(this).addClass("selected");
    $("#graphics .selected").not(this).removeClass("selected");
})

/*---------This will add show hide class to thier spans and vise versa-------*/

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


function changeText(obj, cl1, cl2) {

    obj.getElementsByTagName('SPAN')[0].className = "hide";
    obj.getElementsByTagName('SPAN')[1].className = "show";

    if (prev && obj !== prev) {
        prev.getElementsByTagName('SPAN')[0].className = "show";
        prev.getElementsByTagName('SPAN')[1].className = "hide";
    }
    prev = obj
}


function clearSelection() {
    if (window.getSelection) window.getSelection().removeAllRanges();
    else if (document.selection) document.selection.empty();
}
}(jQuery));

如何同时添加鼠标悬停和点击事件？

3 个答案: