Jquery懸停html文本更改

我有一個像下面這樣的按鈕。我有一個按鈕列表。當用戶點擊它時，我運行一個javascript函數，如果請求響應成功，它會發出ajax請求，然後我更改按鈕標記的狀態屬性。我將其從1更改爲2.Jquery懸停html文本更改

當屬性status = 1時，我希望用戶在懸停在按鈕上時看到一些文本。

當屬性status = 2時，我不希望他看到按鈕懸停上的任何內容。

我嘗試了下面的樣子，但在狀態= 2之後，懸停時按鈕文字仍然變化。我該如何解決這個問題？

<button onclick="dosomething()" id="someid" status="1">name</button> 

<script> 
function dosomething(){ 
    $.ajax({ 
     type:"GET", 
     url:"somefile.php", 
     success : function(data) { 
      if (data == '200') { 
       $('#someid').attr('status', '2'); 
      } 
     }, 
     error : function() { 
      alert('error'); 
     }, 
    }) 
} 

$(document).ready(function() { 
    updateHoverStates() 
}); 

$(document).change(function() { 
    updateHoverStates() 
}); 

function updateHoverStates() { 
    $('button[status=1]').hover(
     function() { 
      $(this).text('You are hovering'); 
     }, 
     function() { 
      $(this).text('You are not hovering'); 
     } 
    ); 
} 
</script>

來源

2012-04-30 trante

你真的應該被設定在JavaScript的點擊處理程序;另外，你所有的jQuery應該放在'$（document）.ready（...）'裏面。這段代碼真是一團糟。 – Mathletics

我認爲它更好地使用CSS類而不是'status'屬性來保持你的html有效... –

這可能工作，這樣的事件被檢查居留制在每次調用時ATTR，而不是僅僅一次在綁定時。

function updateHoverStates() { 
    $('button[status]').hover(
     function() { 
      if($(this).attr('status') == '1') 
       $(this).text('You are hovering'); 
     }, 
     function() { 
      if($(this).attr('status') == '1') 
       $(this).text('You are not hovering'); 
     } 
    ); 
}

作爲一個方面說明，我相信data-status將是具有自定義屬性的更好的支持方式，這也將允許使用的.data('status')代替.attr('status')。

或者您可以使用CSS來模擬

button[status="1"]:hover { 
    //possible attributes here 
}

來源

2012-04-30 20:09:58 Kodi

我想這會花費更多的計算時間。但是，這工作，因爲我想:)謝謝 – trante

change事件不冒泡到文檔，所以updateHoverStates很可能無法被稱爲第二次。

來源

2012-04-30 20:04:19 Mathletics

那麼使用stop（）然後live（）或toggle（）？您是否可以切換懸停事件並每次都以不同的方式設置屬性，因此，更改按鈕上的文本？ –

您一旦設置了與選擇器button[status=1]匹配的所有按鈕的懸停功能。稍後您更改了status屬性，但不會從這些按鈕中分離懸停事件偵聽器。

在功能，您可以設置

$('#someid').attr('status', '2');

你應該簡單地手動刪除事件偵聽器。

$('#someid').unbind('hover');

來源

2012-04-30 20:06:47 Imp

謝謝，但我不喜歡取消綁定懸停，因爲更改狀態屬性後，我使用另一個懸停功能。 – trante

的jsfiddle：http://jsfiddle.net/ajzsv/20/

<button onclick="dosomething()" id="someid" status="1">name</button> 

<script> 
function dosomething() 
{ 
    $('#someid').attr('status', '2'); 
    $('#someid').unbind('hover'); 
} 

$(document).ready(function() 
{ 
    $('button').each(function() 
    { 
     $(this).hover(
     function() 
     { 
      $(this).text('You are hovering'); 
     }, 
     function() 
     { 
      $(this).text('You are not hovering'); 
     }); 
    }); 
}); 
</script>

來源

2012-04-30 20:15:34

Jquery懸停html文本更改

回答

相關問題