在懸停上更改內部HTML

我對jQuery和Javascript開發非常陌生。我很快就想出了一個利用html數據標籤生成鏈接描述的網站導航。我已經把它設置在一個小提琴here。我的問題是，jQuery沒有按預期運行。我太新了，無法確定錯誤可能是什麼。我將不勝感激任何提示。先謝謝你！在懸停上更改內部HTML

這裏是jQuery的代碼片段：

$(document).ready(function() { 
$(".nav-button").hover(function (e) { 
    var description = this.data('title') + ' <span>' + this.data('description') + '</span>'; 
    document.getElementById('nav-description').innerHTML = description; 

}, function (e) { 
    document.getElementById('nav-description').innerHTML = ''; 
}); 
});

來源

2014-09-28 pontinius

jQuery的方式應該是這樣的：

$(function() { 
    $(".nav-button").hover(function (e) { 
     var description = $(this).data('title') + ' <span>' + $(this).data('description') + '</span>'; 
     $('#nav-description').html(description); 
    }, function (e) { 
     $('#nav-description').empty(); 
    }); 
});

建議：

不要用jQuery選擇網本地JavaScript getElementById()等。使用$(function() {});模式代替document.ready。

來源

2014-09-28 06:54:23 Warlock

使用'的重寫.empty'，而不是'的.html（ ''）'。 – 2014-09-28 06:55:46

哦是的同意:) – Warlock 2014-09-28 06:57:05

+1的建議... – 2014-09-28 07:15:02

你不包裝this作爲一個jQuery對象。

var description = $(this).data('title') + ' <span>' + $(this).data('description') + '</span>'; 
       ^^^

當你在它的時候，不妨使用其他行的jQuery。

$('#nav-description').html(description);

來源

2014-09-28 06:52:06 Scimonster

-1

其實this是指列出具有節點不data()方法

所以你應該使用dataset屬性類似

應該

this.dataset['title']; 
this.dataset['description'];

，而不是

this.data('title'); 
this.dataset('description');

DEMO

來源

2014-09-28 07:00:55

就我個人而言，我認爲'dataset'的使用違背了使用jQuery的點;例如，IE只支持v11版本，而不是早期版本（基於MDN瀏覽器兼容性聲明）https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset – 2014-09-28 07:19:11

我不同意使用普通的JavaScript是反對jQuery。 – 2014-09-28 07:58:37

在jQuery的事件處理程序的範圍this指DOM元素，而不是一個jQuery對象。因此，您需要將this與$包裝爲您的jQuery版本，即$(this)。

jQuery的工作方式您應該會發現以下是真的$(this)[0] === this。即jQuery對象將有一個由選擇器匹配的DOM元素數組。

我想是因爲你是新來的jQuery這可能幫助....

http://www.learningjquery.com/2007/08/what-is-this/

這是一個DOM元素

如果是這樣的DOM元素？簡短的答案是 - 通常。使用jQuery編寫腳本通常需要使用回調函數。無論是處理事件，迭代節點集合，動畫化圖像還是應用動態過濾器，回調函數都會在適當的時候調用您的自定義代碼。爲了讓你更容易，jQuery將回調函數的範圍設置爲回調主題的元素。

...和你的代碼

$(document).ready(function() { 
    $(".nav-button").hover(function (e) { 
     var $this = $(this), 
      description = $this.data('title') + ' <span>' + $this.data('description') + '</span>'; 
     $('#nav-description').html(description);    
    }, function (e) { 
     $('#nav-description').html(''); 
    }); 
});

來源

2014-09-28 07:01:28

非常感謝您閱讀其他閱讀材料。這對我來說非常有益！ – pontinius 2014-09-29 17:12:25

@pontinius沒有問題 - 它總是有助於理解事物... – 2014-09-30 11:05:15

在懸停上更改內部HTML

回答

相關問題