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>

Jquery的：

$(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

将您的课程放入一个数组中（例如var colors = [＆＃39; red＆＃39;，＆＃39; yellow＆＃39;，＆＃39; green＆＃39;，＆＃39; blue＆＃39; ＆＃39;黑色＆＃39;]）
随机播放阵列（请参阅How to randomize (shuffle) a JavaScript array?）
实例化计数器变量（例如n）
使用.each（）函数：
- 将颜色数组的计数器索引（例如colors [n]）的值应用于悬停时的列表项
- 递增计数器变量（例如n ++）

e.g。

$('#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"));
        }
    });
});

请参阅test-case at jsFiddle

Answer 5

也许，这样的事情？： demo 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'); }
    );
});

Jquery随机更改列表项的颜色

5 个答案: