每當鼠標移動時，使JQuery工具提示檢索新值

正如我正在開發一個應用程序，該應用程序使用工具提示，當用戶移動鼠標時將顯示不同的值。每當鼠標移動時，使JQuery工具提示檢索新值

用戶將鼠標懸停在表格單元格上，然後應用程序會生成一個數字，光標在單元格中移動的距離越遠，值越高。

我創建了一個運行的工具提示，當鼠標指針位於單元格上時，它確實顯示正確的值。但是，當我移動鼠標時，它不會顯示新的值，而是顯示較舊的值。我需要知道如何在每次鼠標移動或變量值發生變化時進行更新，這個問題的任何想法是什麼？

<table> 
     <tr id="mon_Section"> 
      <td id="day_Title">Monday</td> 
      <td id="mon_Row"></td> 
     </tr> 
</table>

下面是的document.ready函數調用我的函數：

$(document).ready(function() 
{ 
    $("#mon_Row").mousemove(calculate_Time); 
});

下面的功能是：

<script type="text/javascript"> 
var mon_Pos = 0; 
var hour = 0; 
var minute = 0; 
var orig = 0; 
var myxpos = 0; 

function calculate_Time (event) 
{ 
myxpos = event.pageX; 
myxpos = myxpos-194; 

if(myxpos<60) 
{ 
    orig = myxpos; 
    $('#mon_Row').attr("title", orig); 
} 
if (myxpos>=60 && myxpos<120) 
{ 
    orig=myxpos; 
    $('#mon_Row').attr("title", orig); 
} 
if (myxpos>=120 && myxpos<180) 
{ 
    orig=myxpos; 
    $('#mon_Row').attr("title", orig);

該函數內部產生的提示代碼：

$('#mon_Row').each(function() 
{ 
    $(this).qtip(
    { 
     content: 
{ 
    text: false 
}, 
position: 'topRight', 
    hide: 
{ 
    fixed: true // Make it fixed so it can be hovered over 
    }, 
style: 
{ 
    padding: '5px 15px', // Give it some extra padding 
     name: 'dark' // And style it with the preset dark theme 
} 
    }); 
});

I知道一個新值被分配給單元格title屬性，因爲它將顯示在瀏覽器將顯示的標準小工具提示內。 JQuery工具提示不會獲取新值並顯示它，只會在調用時顯示變量的初始值。

來源

2010-04-27 Micheal Smith

你的代碼對我來說不是很清楚，所以這是很長的。首先嚐試unnesting你的代碼，使其更容易的情況下，解析有一個參考的問題：

$(document).ready(function() { 

    $("#mon_Row").mousemove(function() { 

     calculate_Time() ; 
     $(this).qtip(
      // 
     ) ; 

    ); 

});

據我所知，你想要的元素的title屬性設置的位置，然後讀取並顯示其值使用qtip()函數。這是不必要的：如果你讓calculate_Time()返回一個值來代替，

function calculate_Time (event) { 

    var orig ; 
    //conditions setting orig to myxpos 
    return orig ; 

}

可以將其保存到一個變量var myOrig = calculate_Time()，然後傳遞給你的提示功能qtip(myOrig)，或呼叫傳遞給函數本身作爲一個參數qtip(calculate_Time()) ;。這可能更容易維護和調試。

H個

來源

2010-04-27 15:43:50 FK82

如果你想要什麼jQuery的沒有做，跳過jQuery和工作了原始的JavaScript，這裏是我做了一個提示：

<script type="text/javascript"> 
function hover(intext,e){ 
    if(!intext){return} 
    document.getElementById("hoverdiv").innerHTML=intext 
    document.getElementById("hoverdiv").style.display="" 
    var x=0 
    var y=0 
    if(e.pageY>-1){ 
     x=e.pageX 
     y=e.pageY 
    } 
    else{ 
     x=e.clientX 
     y=e.clientY 
     if(document.documentElement.scrollTop>-1){ 
      x+=document.documentElement.scrollLeft 
      y+=document.documentElement.scrollTop 
     } 
     else if(document.body.scrollTop>-1){ 
      x+=document.body.scrollLeft 
      y+=document.body.scrollTop 
     } 
    } 
    document.getElementById("hoverdiv").style.left=(x+24)+"px" 
    document.getElementById("hoverdiv").style.top=(y-24)+"px" 
} 
function hoverout(){ 
    document.getElementById("hoverdiv").style.display="none" 
} 
</script> 
<div id="hoverdiv" style="display:none;position:absolute;background-color:#eef;border:1px solid black;padding:3px 6px;width:180px;"></div>

與onmosuemove配對和onmouseout like so：

<a onmouseout='hoverout()' onmousemove='hover("Tooltip",event)' href='#'>Hover</a>

來源

2010-05-01 14:32:28 aaaaaaaaaaaa

每當鼠標移動時，使JQuery工具提示檢索新值

回答

相關問題