2

私はjQueryが初めてで、jQueryがどのように機能するかを学ぶためだけに、非常に単純なツールチップを実現しようとしています.

グーグルで調べた後、これは私がしたことです：

jQuery：

$(document).ready(function(){

    $("#foo1").mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $('#div1').css({'top':y,'left':x}).show();
    });

    $("#foo1").mousemove(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $('#div1').css({'top':y,'left':x});
    });

    $("#foo1").mouseout(function(){
        $('#div1').hide();
    });

})

HTML:

<div style="width: 200px; border: 1px black solid; position: relative;">
    Something here
</div>
<div id="container" style="width: 300px; border: 1px black solid; position: relative;">
    <a id="foo1" href="javascript:void(0);">[hover me]</a>
    <div id="div1" class="tt">Content goes here.</div>
    <a id="foo2" href="javascript:void(0);">[hover me too!]</a>
    <div id="div2" class="tt">I'm not working :(</div>
</div>

divの中にいるvar x = e.pageX - $("#container").offset().left;ときに問題があったので使用しました#div1position: relative;

すべてが機能しますが、他のリンクを追加するとどうなりますか?

#foo1and #div1（そして最終的#containerには 、しかし実際には必要ありません）をパラメーターとして渡したいのですが、実際には、これを行う方法がまったくわかりません。

ここで検索してみましたが、これが見つかりました: JQuery, Passing Parameters

だから私は多分私は次のようなことができると思います:

function doStuff(param1, param2) {
    $(param1).mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(param2).css({'top':y,'left':x}).show();
    });
    //etc etc
}

しかし、HTML でこの関数を呼び出す方法がわかりません。javascript では のようなonmouseover="doStuff('foo1', 'div1')"ことをしましたが、jQuery で何をすべきかはよくわかりません :|

編集：

これは、div を生成するコードです。

foreach ($colors_array as $key => $value) {
    echo "<div id='foo" . $key . "'>";
    // something else
    // according to some condition, I will decide whether to
    // call or not the function doStuff for this div.
    echo "</div>";
}
4

3 に答える 3

1

別の解決策は、ttクラスを持つ要素の横にある要素を見つけることです。

$(document).ready(function(){

    $(".tooltipped").mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(this).next('.tt').css({'top':y,'left':x}).show();
    });

    $(".tooltipped").mousemove(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(this).next('.tt').css({'top':y,'left':x});
    });

    $(".tooltipped").mouseout(function(){
        $(this).next('.tt').hide();
    });

})

あなたのhtml：

<div id="container" style="width: 300px; border: 1px black solid; position: relative;">
    <a id="foo1" class="tooltipped" href="javascript:void(0);">[hover me]</a>
    <div id="div1" class="tt">Content goes here.</div>
    <a id="foo2" class="tooltipped" href="javascript:void(0);">[hover me too!]</a>
    <div id="div2" class="tt">I'm not working :(</div>
</div>
于 2013-01-21T14:23:11.417 に答える
1

次はどうですか: (ホバー効果を持たせたい要素に class="active" を追加すると仮定します + 動的 div は a 要素の隣にあります)

$(document).ready(function(){

$(".active").each(function(index, value){
    $(this).mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(this).next().css({'top':y,'left':x}).show();                        
    });

    $(this).mousemove(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(this).next().css({'top':y,'left':x});
    });

        $(this).mouseout(function(){
        $(this).next().hide();
    });
});

}))

サンプル HTML コード:

<div style="width: 200px; border: 1px black solid; position: relative;">
    Something here
</div>
<div id="container" style="width: 300px; border: 1px black solid; position: relative;">
    <a id="foo1" class="active" href="javascript:void(0);">[hover me]</a>
    <div id="div1" class="tt">Content goes here.</div>
    <a id="foo2" href="javascript:void(0);">[hover me too!]</a>
    <div id="div2" class="tt">I'm not working :(</div>
    <a id="foo3" class="active" href="javascript:void(0);">[hover me too 3!]</a>
    <div id="div3" class="tt">I'm not working :(</div>
</div>
于 2013-01-21T14:39:12.270 に答える
0

あなたはすでにあなたが必要とするものを持っています。関数名と混同しました：

function setUpHandlers(param1, param2) {
    $(param1).mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(param2).css({'top':y,'left':x}).show();
    });
    //etc etc
}

$(document).ready(function(){
    //Ok, now set them up once
    setUpHandlers('#foo1', '#div1');
    setUpHandlers('#foo2', '#div2');
});
于 2013-01-20T12:05:24.483 に答える