jquery - Jquery随机更改列表项的颜色

Question

所以我是 jquery 的新手，我想制作一个新的导航菜单。我希望这个 jquery 脚本以我选择的各种颜色随机为我的列表项着色。让我们说红色，黄色，绿色，蓝色和黑色。此外，在选择颜色之前和之后也不应该有相同的颜色。

此外，我希望此菜单具有悬停功能，以便一旦悬停其中一个列表项，所有其他列表项都会获得灰色或其他 css 值的颜色。

我希望有人可以帮助我建立这个。

我知道我还没有做太多。

HTML：

<div id="wrapper">
    <div id="nav">
        <ul id="navigation">
            <li>Home</li>
            <li>About</li>
            <li>Products</li>
            <li>Blog</li>
            <li>Contact</li>
        </ul>
    </div>
</div>

查询：

$(document).ready(function() {
    $('#navigation, li').addClass('blue');
});

CSS：

* {
    margin:0px; padding:0px;
}
body {
    background-color:#999;
}

#wrapper {
    width:960px; margin:auto; background-color:#CCC;
}
.blue {
    color:#567;
}

jsfiddle上的演示，链接：http: //jsfiddle.net/iBertel/vbpXP/11/

Answer 1

使用@massivePenguin 的想法在这里，基本上，我们创建一个数组，一些css 规则，列表中所有元素的默认悬停状态为灰色。我们最终得到了具有随机颜色效果的结果。

这是使您的数组随机化的关键。神奇的地方发生在这里，为了使效果更好，向数组添加 5 种左右的颜色以添加到“随机”效果。

colours.sort(function() {return 0.5 - Math.random()});

上面的代码是下面脚本中的关键因素。

var colours = ['red', 'yellow', 'blue', 'green', 'pink'];
$(document).ready(function() {
    $('#navigation li').hover(function() {
        colours.sort(function() {return 0.5 - Math.random()});
        $(this).addClass(colours[0]);
    }, function() {           
        $(this).removeClass(colours[0]);      
    });
});​

http://jsfiddle.net/shannonhochkins/QkWXN/

Answer 2

1. 将您的类放入一个数组中（例如 var colors = ['red','yellow','green','blue','black']）
2. 随机播放数组（请参阅如何随机化（随机播放）JavaScript 数组？）
3. 实例化一个计数器变量（例如 n）
4. 使用 .each() 函数来：
   • 将颜色数组的计数器索引值（例如 colours[n]）应用于悬停时的列表项
   • 增加计数器变量（例如 n++）

例如

$('#nav li').each(function(){
    var switchColour = colours[n];
    $(this).hover(function(){
        $(this).addClass(switchColour);
    },
    function(){
        $(this).removeClass(switchColour);
    })
    n++;
});

Answer 3

因此，您可以使用以下代码实现此目的：

$('#navigation li').mouseover(function () {
    // this in this context is the currently hovered list DOM element.
    $(this).siblings().addClass('desired-class');
}).mouseout(function () {
    $(this).siblings().removeClass('desired-class');
});

只是一个说明：

您在两个不同的元素上具有相同的 ID。你应该改变它。

Answer 4

对于加载时的随机颜色，但不是在悬停时，使用这个：

$(function(){
    // The list items
    var $listItems = $("#navigation li");
    // Classes we want to use
    var classes = "red yellow green blue black".split(" ");
    // Create a copy of the classes
    var classesToUse = classes.slice(0);

    $listItems.each(function(){
        // Reuse the same classes if we've used all up
        if (classesToUse.length === 0) { classesToUse = classes.slice(0); }
        // Generate a random class, remove that from classesToUse
        // and then add it to the element
        $(this).addClass(
            classesToUse.splice(
                Math.floor(Math.random() * classesToUse.length), 
                1
            ).join("")
        );
    });
});​

如果您想在每次悬停时使用随机颜色，请执行以下操作：

$(function(){
    // The list items
    var $listItems = $("#navigation li");
    // Classes we want to use
    var classes = "red yellow green blue black".split(" ");
    // Function to generate a random class
    function getRandomClass() {
        return classes[Math.floor(Math.random() * classes.length)]
    }
    // Bind to hover so that we can generate a new class
    $listItems.hover(function(e){
        var $elm = $(this); 
        if (e.type === "mouseenter") {
            // Generate new class, add it to dataset and class
            var randomClass = getRandomClass();
            $elm.data("class", randomClass).addClass(randomClass);
        } else {
            // Remove previous class, if any
            $elm.removeClass($elm.data("class"));
        }
    });
});

请参阅jsFiddle 的测试用例

Answer 5

也许，像这样的东西？:演示 jsFiddle

颜色不能与同一种颜色相邻。但是，这是一个随机选择，所以即使所有颜色都还没有被选中，也可以有两次相同的颜色。

编辑hover

var myColors = ['blue', 'red', 'green', 'yellow'], previousRandom = '';

$(function() {
    var li = $('#navigation li');
    li.each(function(i){
        var t = $(this), random;
        do{
            random = Math.floor((Math.random() * myColors.length ));
        }while(random == previousRandom);
        t.addClass(myColors[random]);
        previousRandom = random;
    });

    li.hover(
        function(){ $(this).siblings().addClass('neutral'); },
        function(){ $(this).siblings().removeClass('neutral'); }
    );
});​