-1

デモ

このような私のウェブサイトにjqueryを使用して固定スタイルのツールチップを作成しています

$('.roll1, .roll2, .roll3').hide();
    //one
    $('#rollover .one').hover(function(e){
        var thisleft = $(this).offset().left;
        var thistop = $(this).offset().top - $(this).height() + $('.roll1').height() - 50;
        $('.roll1').show().offset({left: thisleft, top: thistop});                             
    }, function(){
        $('.roll1').hide();
    });
    //two
    $('#rollover .two').hover(function(e){
        var thisleft = $(this).offset().left;
        var thistop = $(this).offset().top - $(this).height() + $('.roll2').height() - 50;
        $('.roll2').show().offset({left: thisleft, top: thistop});                             
    }, function(){
        $('.roll2').hide();
    });
    //three
    $('#rollover .three').hover(function(e){
        var thisleft = $(this).offset().left;
        var thistop = $(this).offset().top - $(this).height() + $('.roll3').height() - 50;
        $('.roll3').show().offset({left: thisleft, top: thistop});                             
    }, function(){
        $('.roll3').hide();
    });

私はjqueryの初心者なので、3つの機能のうち1つ、2つ、3つを管理しましたが、次のようなアイデアやその他のアイデアを使用するように、1つの機能ブロックで管理できます

$('#rollover .one, #rollover .two, #rollover .three').hover(function(e){

}

しかし、私はこの行に行き詰まっています

var thistop = ....... $('.roll1').height() // this one

どうやってやるの？

このようなものを定義する必要があると思われる場合

var thissel = $(this).children();

上記のように検索していません cozroll1, roll2, roll3はドキュメントのどこかにある可能性があります

4

3 に答える 3

1 
$('#roll1, #roll2, #roll3').hover(function(e){
        var thisleft = $(this).offset().left;
        var thistop = $(this).offset().top - $(this).height() + $(this).height() - 50;
        $(this).show().offset({left: thisleft, top: thistop});                             
    }, function(){
        $(this).hide();
    });
于 2013-09-26T09:36:43.877 に答える
0

これを試してみてください:- http://jsfiddle.net/adiioo7/Q5Yba/1/

JS:-

$('.roll1, .roll2, .roll3').hide();
var element;
$('#rollover .one, #rollover .two, #rollover .three').hover(function (e) {
    var thisleft = $(this).offset().left;
    element=$(this).find("[class*=roll]");
    var thistop = $(this).offset().top - $(this).height() + $(element).height() - 50;
    $(element).show().offset({
        left: thisleft,
        top: thistop
    });
}, function () {
    $(element).hide();
});
于 2013-09-26T09:40:34.133 に答える
0

ワーキングデモ

これを試して

  $('.roll1, .roll2, .roll3').hide();
    $('#rollover .one,.two,.three').hover(function(e){
        var chld=$(this).attr('class');
        var thisleft = $(this).offset().left;
        var thistop = $(this).offset().top - $(this).height() + $('#'+chld).height() - 50;
        $('#'+chld).show().offset({left: thisleft, top: thistop});                             
    }, function(){
         var chld=$(this).attr('class');
        $('#'+chld).hide();
    });

html

<div id="rollover" class="cf">
            <div class="one">
                one
                <div class="roll1" id='one'>one hover</div>

            </div>
            <div class="two">
            two
                <div class="roll2" id='two' >two hover</div>
            </div>
            <div class="three">
            three
                <div class="roll3" id='three'>three hover</div>
            </div>
        </div>
于 2013-09-26T09:54:23.800 に答える