将 div id 的 jQuery 脚本转换为循环 div 类答案

【问题标题】：converting jQuery script for div id to loop div classes将 div id 的 jQuery 脚本转换为循环 div 类
【发布时间】：2012-05-03 18:37:32
【问题描述】：

以下脚本将数组中的随机颜色应用于 div id，并在悬停时更改颜色。我想对其进行修改，使其循环遍历 div 类并将随机颜色应用于页面上的所有类。显然，点击功能必须由 id 完成，但我想有一种方法可以循环遍历 div 类，这样它们都有不同的随机颜色，在悬停时会发生变化。

有人可以帮忙吗？

谢谢

尼克

$(document).ready(function() {
  var test = $("#example").text().split('');

    var normal = generateColors(test);
    var hover = generateColors(test);
    $("#example").html(normal);

    $("#example").hover( 
      function(event) { $("#example").html(hover) }, 
      function(event) { $("#example").html(normal) });

    $("#example").click(function() { 
    location.href = "http://www.google.co.uk"; 
    });

});

function generateColors(characters) {
    var result = "";
    var i = 0;
    for(i=0; i < characters.length; i++) {
        result += "<span style='color:"+getColor()+"'>"+characters[i]+"</span>";
    }

   return result;
}        

function getColor() {
    var colList = ['#7EA404', '#14AFB0','#B05718', '#B0A914', '#B01617','#902BB0', '#B003A2', '#4A429C','#33821E', '#226795', '#D0B600','#886833'];

    var i = Math.floor((Math.random()*colList.length));
  return colList[i];
}

【问题讨论】：

api.jquery.com/jQuery.each

标签： jquery class loops click hover

【解决方案1】：

要应用颜色并将它们存储在不同的元素上，您可以这样做：

$(".example").each(function() {
    var text = $(this).text().split(''),
        normal = generateColors(text),
        hover = generateColors(text);

    $(this).html(normal).data('hover', hover).data('normal', normal);
});

$(".example").hover( 
    function() {
        $(this).html($(this).data('hover'));
    }, 
    function() { 
        $(this).html($(this).data('normal'));
});

在点击时使用 location.href 设置每个链接似乎是一个非常糟糕的主意，但这取决于您。

【讨论】：

谢谢，这正是我想要的。我使用 jQuery 设置链接的原因是 div 中的 href 不起作用。我现在意识到，如果我将类“示例”添加到链接中它可以工作。谢谢！
是的，您可以改用<a> 元素，它的工作原理与您现在已经意识到的一样。乐于助人！

【解决方案2】：

显然点击功能必须由 id 完成

我不知道为什么会这样。

如果您愿意，可以通过类将点击函数应用于 jQuery 对象数组：

$('.myDivs').click(...)

【讨论】：

每个 div 的 URL 是否不同？
您是否通过 jQuery 将 url 分配给每个单独的 div？我建议将网址存储在 data-* 属性中，但我不完全确定您的目标是什么。
这就是我使用的方法，正如您在上面看到的，使用单个 DIV id。我只是想将颜色效果应用于页面上的许多 DIV/链接。随机颜色效果是相同的，但每个都会链接到不同的页面。
拆分逻辑。通过一个函数分配 URL，然后通过另一个函数分配随机颜色。对于随机颜色，只需给每个 div 相同的类并通过类检索它们。

【解决方案3】：

你在寻找类似的东西

$('div').each(function(){
  //code
})

【讨论】：

低质量且不是很有针对性地回答所提出的问题。（太笼统）