1

以下に示すようなリンクがいくつかあります。ここにjsfiddle リンクがあります。

私は何をしたいですか？

マウス オーバーが 3 秒を超えた場合にのみ、jquery メソッドが起動されるようにします。使わなければsetTimeoutならないことはわかっていますが、使い方がわかりません。

私のフィドルリンクを編集して誰かが私を助けることができれば

HTML コード

<ul>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin (actor)', this)" onclick="Suggestion('Sachin (actor)');" class="link">Sachin (actor)</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin Dev Burman', this)" onclick="Suggestion('Sachin Dev Burman');" class="link">Sachin Dev Burman</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin Pilot', this)" onclick="Suggestion('Sachin Pilot');" class="link">Sachin Pilot</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin Rana', this)" onclick="Suggestion('Sachin Rana');" class="link">Sachin Rana</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin Tendulkar', this)" onclick="Suggestion('Sachin Tendulkar');" class="link">Sachin Tendulkar</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin, Pas-de-Calais', this)" onclick="Suggestion('Sachin, Pas-de-Calais');" class="link">Sachin, Pas-de-Calais</a>
     </li>
</ul>
<hr/>
<p style="color:red;" id="moreInfo"></p>

Jクエリコード

function GetSomeDetail(input, currentContext) {   
    $("#moreInfo").text(input);
}

function RemoveDetails(currentContext) {
    $("#moreInfo").text('Unloaded !');
}

これについて私を助けてください

4

4 に答える 4

3

あなたはこのようなことをすることができます

var timeout;
    toExecute = function () {
        //
    };


$(XYZ).on({
    mouseover: function () {
        if(timeout) clearTimeout(timeout);
        timeout = setTimeout(toExecute, 3000);
    },
    mouseleave': function () {
        clearTimeout(timeout);
    }
);

これがフィドルの実装です。

于 2012-08-27T12:56:51.977 に答える
0

このプラグインを使用することをお勧めします。

を使用してこれを作成できsetTimeout()ますが、思ったよりも少し多くの問題が発生する可能性があります

于 2012-08-27T12:57:05.420 に答える
0

多分何かのような

<ul>
    <li><a class="link">Sachin (actor)</a></li>
    <li><a class="link">Sachin Dev Burman</a></li>
    <li><a class="link">Sachin Pilot</a></li>
    <li><a class="link">Sachin Rana</a></li>
    <li><a class="link">Sachin Tendulkar</a></li>
    <li><a class="link">Sachin, Pas-de-Calais</a></li>
</ul>
<hr/>
<p style="color:red;" id="moreInfo"></p>

js

var timer;

$(".link").on({
    mouseenter: function() {
        var text = $(this).text();
        timer = setTimeout(function() {
            $("#moreInfo").text(text);
        }, 1000); //set to one second now
    },
    mouseleave: function() {
        clearTimeout(timer);
        $("#moreInfo").text('Unloaded !');
    },
    click: function() {
        Suggestion($(this).text());
    }
});

フィドル </p>

于 2012-08-27T13:16:07.200 に答える
0

フィドル: http://jsfiddle.net/Guffa/3YBr8/2/

HTML マークアップではなくスクリプトでイベントを設定することにより、コードを大幅にクリーンアップできます。スクリプトで必要なテキストを各項目のデータ属性に入れることができます。

<ul>
    <li>
        <a data-input="Sachin (actor)" class="link">Sachin (actor)</a>
    </li>
    <li>
        <a data-input="Sachin Dev Burman" class="link">Sachin Dev Burman</a>
    </li>
    <li>
        <a data-input="Sachin Pilot" class="link">Sachin Pilot</a>
    </li>
    <li>
        <a data-input="Sachin Rana" class="link">Sachin Rana</a>
    </li>
    <li>
        <a data-input="Sachin Tendulkar" class="link">Sachin Tendulkar</a>
    </li>
    <li>
        <a data-input="Sachin, Pas-de-Calais" onclick="Suggestion('Sachin, Pas-de-Calais');" class="link">Sachin, Pas-de-Calais</a>
    </li>
</ul>
<hr/>
<p style="color:red;" id="moreInfo"></p>

ユーザーがアイテムをホバーしたときにタイマーを開始します。変数を使用してタイマーのハンドルを保持し、時間が経過する前にマウスを離した場合にタイマーを停止できるようにします。

function info(text) {
    $("#moreInfo").text(text);
}

function GetSomeDetail(input) {   
    info(input);
}

function RemoveDetails() {
    info('Unloaded !');
}

function Suggestion(input) {
    alert(input);
}

$(document).ready(function(){

    var timer = null;

    $('.link').mouseover(function(){
        if (timer != null) {
            RemoveDetails();
        }
        var input = $(this).data('input');
        timer = window.setTimeout(function(){
            timer = null;
            GetSomeDetail(input);
        }, 3000);
        info('timer started');
    }).mouseout(function(){
        if (timer != null) {
            window.clearTimeout(timer);
            timer = null;
            info('timer stopped');
        } else {
            RemoveDetails();
        }
    }).click(function(){
        Suggestion($(this).data('input'))
    });

});

タイマーが開始または停止されたときにいくつかの情報を表示する呼び出しを追加しましたが、それらはもちろん最終結果にはありません。

于 2012-08-27T13:12:10.857 に答える