-2

だから私はjqueryが初めてで、新しいナビゲーションメニューを作りたいと思っています。この jquery スクリプトで、選択したさまざまな色でリスト項目をランダムに色付けしたいと考えています。赤、黄、緑、青、黒と言ってみましょう。また、色を選択する前後で同じ色であってはなりません。

さらに、このメニューにホバー機能を持たせて、リスト項目の 1 つをホバーすると、他のすべてのリスト項目が灰色または別の 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>

Jクエリ：

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

4

5 に答える 5

3

@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/

于 2012-10-01T12:06:28.033 に答える
2
  1. クラスを配列に入れます（例：varcolors = ['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++;
});
于 2012-10-01T12:05:39.267 に答える
0

もしかして、こういうこと？:デモ jsFiddle

色が同じ色の隣にあることはできません。ただし、これはランダムな選択であるため、すべての色がまだ選択されていなくても、同じ色が 2 回存在する可能性があります。

で編集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'); }
    );
});​
于 2012-10-01T12:26:14.980 に答える
0

したがって、次のコードでこれを実現できます。

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

ただのメモ：

2 つの異なる要素で同じ ID を持っています。それを変更する必要があります。

于 2012-10-01T11:54:52.823 に答える
0

ホバーではなくロード時のランダムな色については、これを使用します。

$(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 のテストケースを参照してください

于 2012-10-01T12:19:48.433 に答える