3

JavaScriptの初心者です。ここのリンクをたどってみました： ホバー効果に色をランダムに割り当てる方法

しかし、#menu_4645908 nav リンクで同じ効果を再現できませんでした...

#menu_4645908.red:hover を使用していますが、効果がありません。

注：クラスの変数を color から padding に変更しました。作業中に同じクラス名を使用しただけで、作業時に変更されます..

私がどこで間違ったのか分かりますか？

[アップデート]

これは、スレッドからコピーされた、使用している CSS です。

#menu_4645908.green:hover { color: #1ace84; }
#menu_4645908.purple:hover { color: #a262c0; }
#menu_4645908.teal:hover { color: #4ac0aa; }
#menu_4645908.violet:hover { color: #8c78ba; }
#menu_4645908.pink:hover { color: #d529cd; }

そして、これはjavascriptです

$(document).ready(function() { 
    $("a").hover(function(e) { 
        var randomClass = getRandomClass(); 
        $(e.target).attr("class", randomClass); 
    }); 
}); 

function getRandomClass() { 
   //Store available css classes 
   var classes = new Array("green", "purple", "teal", "violet", "pink"); 

   //Give a random number from 0 to 5 
   var randomNumber = Math.floor(Math.random()*6); 

   return classes[randomNumber]; 
}
4

1 に答える 1

1

コードに 2 つの問題があるようです。

  1. jQueryには、addClass()まさにあなたが望むことを行う機能があります
  2. クラスはホバー時に割り当てられるべきではなく、ページのロード時に割り当てられるべきです

代わりにこれを試してください: ( JsFiddle )

$(document).ready(function() {
  $.each($("a"), function(index, element){
    $(this).addClass(getRandomClass());
  });
});

function getRandomClass() { 
 //Store available css classes 
 var classes = new Array("green", "purple", "teal", "violet", "pink");
 //Give a random number from 0 to 5
 var randomNumber = Math.floor(Math.random()*6); 
 return classes[randomNumber]; 
}

編集:ユーザーのセミコロンがコメントで述べたように、これはページロード時にランダムなクラスを割り当てたい場合にのみ機能します。

その場合、毎回特定の色を割り当てることができます。

$(document).ready(function() {
  ("a").hover(function(){
    $(this).css('color', getRandomColor());
  }, function(){
    $(this).css('color', ''); // Reverts to default color
  });
}); 

function getRandomColor() {
 var colors = new Array("#1ace84", "#a262c0", "#4ac0aa", "#8c78ba", "#d529cd");
 var randomNumber = Math.floor(Math.random()*colors.length); 
 return colors[randomNumber];
} ​
于 2012-12-25T23:39:45.880 に答える