2

私は2つの異なる例を持っています.1つはマウスオーバー機能を持ち、もう1つはクリックイベント機能を持っていますが、今は両方を一緒にしたいのですが、以下に説明があります:

マウスオーバーのリンク例: 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 を 2 回設定していることです。あなたは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 に答える