管理一个区块内的代码

Question

demo

我正在使用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的初学者，我已经管理了三个函数中的一个，两个和三个，但它可以在一个函数块中进行管理，如使用以下或任何其他想法

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

}

但是我坚持这条线

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

我该怎么做？

如果你认为我应该为这样的东西定义

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

我不是像上面那样搜索，因为roll1, roll2, roll3可能位于文档的任何位置

Answer 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();
    });

Answer 2

试试这个： - 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();
});

Answer 3

工作DEMO

试试这个

  $('.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>