jQuery div元素中的每个字母，hover时数组中的随机颜色

我试图让div元素中的每个字母从一组颜色变为随机颜色。 然后当鼠标离开div时重置。

这是我到目前为止所得到的。 我认为我非常接近，除了它实际上没有用的事实。 这是由本网站上的几个不同的片段构建的。

$(document).ready(function() { // COLOURS ARRAY var colours = Array("#ddd", "#333", "#999", "#bbb"), idx; $("DIV#header").hover(function(){ $( $(this).text().split('')).each(function(index, character) { idx = Math.floor(Math.random() * colours.length); $(this).css("color", colours[idx]); }); }, function() { $(this).css("color","#ddd"); }); }); 

它不会产生任何JS错误。 hover的第二个function似乎有效但不是第一个。 任何帮助都会感激不尽！

Answer 1

字符串不是元素，您无法向其添加CSS属性。 你可以将你的字母放在span元素中然后设置样式，试试这个：

 $(document).ready(function() { // COLOURS ARRAY var colours = Array("#ddd", "#333", "#999", "#bbb"), idx; $('DIV#header').hover(function(){ $('span', this).each(function(index, character) { idx = Math.floor(Math.random() * colours.length); $(this).css("color", colours[idx]); }); }, function() { $('span',this).css("color","#ddd"); }); }); 

http://jsfiddle.net/BC5jt/

Answer 2

您只能向元素添加样式，将每个字符包装在并设置样式的样式。

 #header {color: #ddd}​ 

 
Some text here
​ 

 $(document).ready(function() { // COLOURS ARRAY var colours = Array("#ddd", "#333", "#999", "#bbb"), idx; $("#header").hover(function(){ var header = $(this); var characters = header.text().split(''); header.empty(); var content = ''; for(var i = 0; i < characters.length; i++) { idx = Math.floor(Math.random() * colours.length); content += '' + characters[i] + ''; } header.append(content); }, function() { $(this).find('span').contents().unwrap(); }); }); 

http://jsfiddle.net/vVNRF/

Answer 3

正如其他人所指出的那样，你只能设计一个元素的样式，所以你需要将每个字母包装在它自己的元素中。 以下是执行此操作的示例方法。 它也可以递归地工作，因此这将适用于包含其他元素的文本，例如 ， 等。 下面的其他示例假设div只包含文本而内部没有其他HTML标记。

 var colours = Array("#ddd", "#333", "#999", "#bbb"); $('#header').hover(function(){ wrapLetters(this); $('.random-color', this).css('color', function(){ var idx = Math.floor(Math.random() * colours.length); return colours[idx]; }); }, function(){ $('.random-color', this).css('color', '#ddd'); }); // Wrap every letter in a  with .random-color class. function wrapLetters(el){ if ($(el).hasClass('random-color')) return; // Go through children, need to make it an array because we modify // childNodes inside the loop and things get confused by that. $.each($.makeArray(el.childNodes), function(i, node){ // Recursively wrap things that aren't text. if (node.nodeType !== Node.TEXT_NODE) return wrapLetters(node); // Create new spans for every letter. $.each(node.data, function(j, letter){ var span = $('').text(letter); node.parentElement.insertBefore(span[0], node); }); // Remove old non-wrapped text. node.parentElement.removeChild(node); }); } 

小提琴： http ： //jsfiddle.net/aWE9U/2/

Answer 4

嗯，这正是Musa所说的，你不能将样式应用于文本节点，你需要在每个角色周围使用元素。 以下是一些动态添加跨度的示例代码：

 $(document).ready(function() { // COLOURS ARRAY var colours = ["#ddd", "#333", "#999", "#bbb"], idx; $("DIV#header").hover(function(){ var div = $(this); var chars = div.text().split(''); div.html(''); for(var i=0; i' + chars[i] + '').css("color", colours[idx]) div.append(span); } }, function() { $(this).find('span').css("color","#ddd"); }); });​ 

http://jsfiddle.net/Mv4pw/