2

我有两个不同的示例，一个具有鼠标悬停功能，另一个具有单击事件功能，但现在我希望将两者放在一起，以下是描述：

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

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

需求是这样的

在这个例子中（http://ivyfa.advisorproducts.com/financial-planning-process）现在鼠标悬停功能正在工作，但现在我想要以下功能：

  1. 当用户将鼠标移到图像上时，在中心它们的相关文本将在漏斗和下面的圆圈示例中可见。
  2. 如果用户单击任何图像部分，则每次都可以看到其相关文本，直到用户单击另一个图像或部分。
  3. 当用户将鼠标悬停在 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();
}

谢谢苏希尔

4

3 回答 3

6

您可以将多个事件名称添加到同一分配：

$(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 () {...});

如果需要，这将使管理事件变得更容易（例如，删除它们）。

于 2012-11-23T13:38:55.527 回答
1

您可以通过使用向 DOM 添加多个事件

$(document).on('mouseover','.yourObject', function(){ //over code })
           .on('click', '.yourObject', function() { //click code});
于 2012-11-23T13:25:44.537 回答
1

您的代码的问题是您设置了 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));
于 2012-11-23T13:43:49.020 回答