jQuery離開懸停不顯示正確的內容

我想通過模擬時鐘作出選擇時間。我現在的問題是，當我將鼠標懸停在小時分區上時。它應該在懸停時顯示其他內容（現在文本爲「懸停」），並在離開時返回小時文本（例如「10」）。問題是，離開時，所有的小時div被設置爲文本「12」（腳本所做的最後一個div）。jQuery離開懸停不顯示正確的內容

我不明白爲什麼它不按預期工作。也許你會呢？

下面是腳本：

'use strict' 

var d = 12; // number of hours 
var cx = 200; 
var cy = 200; 
var r = 40; 
var a = 2*Math.PI/d; // angle of one hour in radians 
var s = a*2; // Displace starting of the circle to fit a clock 
for(var i=0; i<d; i++) { 
    var x = Math.round(cx + r*Math.cos(a*i-s)); 
    var y = Math.round(cy + r*Math.sin(a*i-s)); 
    var ii = i+1; 
    var space = (ii<10 ? "&nbsp;":""); 
    $('.circle').append('<div class="slices" id="slice'+ii+'">'+space+ii+'</div>'); 
    $('#slice'+ii).css({left:x,top:y}).hover(
    function() { 
     $(this).html("Hovering"); 
    }, 
    function() { 
     $(this).html(space+ii); 
    } 
); 
}

要看到它的行動，看到http://plnkr.co/edit/ORuRyr?p=preview

來源

2013-07-25 EricC

這是因爲在循環您正在更新你的'ii'和循環後爲12。所以，當你懸停後更換您的HTML，你的'ii'是12並把它放進你的div中。當鼠標懸停在div上時，你需要「記住」HTML的內容，並在懸停時將其放回原處。 – putvande

什麼@putvande在評論中說的是對的，但你不一定需要「記住」什麼 - 你可以從元素的id中提取正確的數字。

要做到這一點，則更換線

$(this).html(space+ii);

與

$(this).html(this.id.substring(5));

來源

2013-07-25 19:51:34 gtmtg

唉！當然。感謝你們兩位！ – EricC

@EricC好極了，沒問題！ – gtmtg

聲明一個變種跟蹤懸停李和回調更換。

var text = ''; 
     $('#slice'+ii).css({left:x,top:y}).hover( 
     function() { 
      text = $(this).html(); 
      $(this).html("Hovering"); 
     }, 
     function() { 
      $(this).html(space+text); 
     } 
    );

更新演示here

來源

2013-07-25 19:53:59 SachinGutte

實際上甚至比接受的解決方案稍好一些，因爲它使我的的數字小於10（請注意，「空間」不是必需的，因爲它與最初的「ii」 - 使用有相同的問題，但它不再需要，因爲原始的div文本保存在變量文本中）。謝謝！ – EricC

@EricC只是一個關於接受答案的說明。 'this.id.substring（5）'也會起作用，比'.attr（）'或'.prop（）'快。 – SachinGutte

jQuery離開懸停不顯示正確的內容

回答

相關問題