2

すでにマウスオーバーイベントがある場合、どのようにマウスクリックイベントを追加できますか？私の要件は次のようになります：

例： -http : //wheaton.advisorproducts.com/investment-advisory

要件 -

  • MouseOver機能は正しい順序で機能しています。
  • クリックイベントとマウスオーバーイベントを一緒に追加したい-

ユーザーが上部のじょうごと下部の丸い円の両方で指定された画像部分のいずれかをクリックすると、ユーザーが他のセクションをクリックするまで、関連するテキストまたはコンテンツが表示されます。また、このクリックイベントとともにマウスオーバー機能が機能します。同じ方法。

手段-ユーザーが画像セクションの上にマウスを移動すると、関連するテキストが表示されますが、ユーザーがセクションのいずれかをクリックすると、ユーザーが他の部分またはセクションをクリックするか、他のセクションの上にマウスを移動するまで、関連するテキストが表示されます。

以下は私がマウスオーバー機能のためだけに作成したjsです-今私はマウスオーバーとクリックイベントの両方を一緒にしたいと思っています。

var IdAry=['slide1', '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 class="BottomGraph">
        <div class="row1">
            <a href="#" id="slide1">
                <span id="span1"></span>
                <span class="hide">Each client is provided with quarterly aggregated account statements detailing investment performance across individual accounts. Periodic client meetings provide opportunities to receive more detailed performance attribution.</span>
            </a>
            <a href="#" id="slide2">
                <span id="span1"></span>
                <span class="hide">How funds are invested across broad asset classes is the primary determinant of long term returns and determines the overall risk profile of your portfolio. We therefore take great care in recommending an asset allocation that incorporates the financial goals and risk tolerance of each client.</span>                        
            </a>
        </div>  

        <div class="row2">
            <a href="#" id="slide3">
                <span id="span1"></span>
                <span class="hide">We continuously monitor our managers to ensure that each strategy is performing as expected.</span>
            </a>
            <a href="#" id="slide4">
                <span id="span1"></span>
                <span class="hide">The asset allocation decision is implemented with money managers vetted by WWP for their experience, skill and expertise in their respective investment strategies, including tactical ETF managers, growing dividend equity managers or fixed-income managers.</span>                       
            </a>
        </div>
    </div>
4

4 に答える 4

4

さまざまな方法でそれを行うことができます。最初に、マウスオーバーの動作をcssに任せることができます。これは、私が見ることができるように、単なるテキスト領域の表示です。

div {display:none;}
div:hover, div:active {display:block;}

次に、異なるイベントに対して同じ動作が必要な場合は、onメソッドとbindメソッドでマルチイベントを宣言するのに役立つjqueryを使用することをお勧めします。

 $.bind('click, hover', function(){
     //do stuff
 })

onメソッドもあります：

 $.on('click, hover', function(){
     //do stuff
 })
于 2012-11-26T12:14:18.363 に答える
2

上のグラフ：

jQueryは：hover状態を操作できませんが、cssはトグルを提供できないため、：hover css pseudoを使用する代わりにjQueryにホバーイベントを処理させることが、これを行う唯一の方法です。代わりに、属性と属性セレクターを使用してください。どちらもcssとjQueryを介して操作できます

CSS：

.TopGraph a[attr-active="one"]
{
    float:left;
    width:240px;
    height:104px;
    position:absolute;
    left:0;
    top:35px;
    -webkit-border-radius: 20px 100px 100px 20px;
    -moz-border-radius: 20px 100px 100px 20px;
    border-radius: 20px 100px 100px 20px;
    background:url('../images/one-hover.jpg') 0 0 no-repeat;
    behavior: url('css/PIE.htc');
}

.TopGraph a[attr-active="two"]
{
    float:left;
    width:250px;
    height:180px;
    position:absolute;
    left:250px;
    top:51px;
    -webkit-border-radius: 100px 20px 20px 500px;
    -moz-border-radius: 100px 20px 20px 500px;
    border-radius: 100px 20px 20px 500px;
    background:url('../images/two-hover.jpg') 0 0 no-repeat;
    behavior: url('css/PIE.htc');
}

.TopGraph a[attr-active="three"]
{
    float:left;
    width:221px;
    height:103px;
    position:absolute;
    left:84px;
    top:155px;
    -webkit-border-radius: 20px 100px 100px 20px;
    -moz-border-radius: 20px 100px 100px 20px;
    border-radius: 20px 100px 100px 20px;
    background:url('../images/three-hover.jpg') 0 0 no-repeat;
    behavior: url('css/PIE.htc');
}

JS：

$(document).ready(function() {
    $('.TopGraph').find('a').each(function() {
        $(this).attr('attr-active', '');
        $(this).attr('attr-clicked', '');
        $(this).click(function(event) {
            event.preventDefault();
            var isAnyActive_dsanjj325kj4 = false;
            if ($(this).attr('attr-clicked') == "true") {
                isAnyActive_dsanjj325kj4 = true;
            }
            $('.TopGraph').find('a').each(function() {
                $(this).attr('attr-active', '');
                $(this).attr('attr-clicked', '');
            });
            if (isAnyActive_dsanjj325kj4 == false) {
                $(this).attr('attr-clicked', 'true');
                $(this).attr('attr-active', $(this).attr('class'));
            }
        });
        $(this).hover(function() {
            if ($(this).attr('attr-clicked') == '') {

                var isAnyActive_dsanjj325kj4 = '';
                $('.TopGraph').find('a').each(function() {
                    $(this).attr('attr-active', '');
                });
            }
            $(this).attr('attr-active', $(this).attr('class'));
        }, function() {
            $('.TopGraph').find('a').each(function() {
                $(this).attr('attr-active', '');
                if ($(this).attr('attr-clicked') == 'true') {
                    $(this).attr('attr-active', $(this).attr('class'));
                }
            });
        });
    });
});

下のグラフ[元の回答]：

要素に属性を付加してクリックされたかどうかを検出し、別の要素が操作された場合にその属性をすべての要素にリセットすることで、次のような効果が得られます。

$(document).ready(function() {
    $('[id^="slide"]').each(function() {
        $(this).attr('attr-active', 'false');
        $(this).attr('attr-clicked', 'false');
        $(this).click(function(event) {
            event.preventDefault();
            var preExist_ksnfk4n534nj5345 = false;
            if ($(this).attr('attr-clicked') == 'true') {
                preExist_ksnfk4n534nj5345 = true;
            }
            $('[id^="slide"]').each(function() {
                $(this).attr('attr-active', 'false');
                $(this).attr('attr-clicked', 'false');
                changeText($(this), 'show', 'hide');
            });
            if (preExist_ksnfk4n534nj5345 == true) {
                $(this).attr('attr-clicked', 'false');
                changeText($(this), 'hide', 'show');
            } else {
                $(this).attr('attr-active', 'true');
                $(this).attr('attr-clicked', 'true');
                changeText($(this), 'hide', 'show');
            }
        });
        $(this).hover(function() {
            var isAnyActive_san9h39423ht = false;
            $('[id^="slide"]').each(function() {
                $(this).attr('attr-active', 'false');
                changeText($(this), 'show', 'hide');
            });
            changeText($(this), 'hide', 'show');
        }, function() {
            if ($(this).attr('attr-active') == 'false') {
                changeText($(this), 'show', 'hide');
            }
            $('[id^="slide"]').each(function() {
                if ($(this).attr('attr-clicked') == 'true') {
                    changeText($(this), 'hide', 'show');
                }
            });
        });
    });
});

function changeText(obj, cl1, cl2) {
    obj.children('span').eq(0).attr('class', cl1);
    obj.children('span').eq(1).attr('class', cl2);
}
于 2012-11-26T13:49:52.017 に答える
0

追加できます

el.onclick= function(){
//code
}

ここに見られるように

于 2012-11-26T12:18:36.220 に答える
0

これは問題ではないはずです。テキストを表示および非表示にする2つの関数を作成し、両方のイベントからそれらを呼び出します。IE

el.onmouseover = function(){
showFunction();
};
el.onclick = function(){
showFunction();
}
function showFunction(){
changeText(this,'hide','show');
}

また、要素を選択してイベントをキャッチする方がはるかに簡単でクリーンなため、jqueryの使用を検討する必要があります。また、id-sのリストの代わりにcssクラスを使用することを検討してください。これは、はるかにクリーンなためです。また、css class ie class = "slide"を使用する場合は、前のテキストの終了をはるかに簡単に呼び出すことができます。

el.onclick = function(){
$(".slide").hide(); // hides all text elements.
showFunction();
}
于 2012-11-26T12:24:35.177 に答える