Вопросы Теги

Добавление Случайным образом выбранного класса к HTML-тэгу с помощью jQuery

Точка, которую я должен сделать, находится в моем меню, я хотел бы добавить один из классов (упомянутых ниже) с абсолютно произвольным порядком каждый раз, когда функция запускается (загрузка страницы)

Это - мой HTML

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Why Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

И это - то, что я хотел бы иметь как результат с каждым разом различный порядок добавленных классов

<div id="menu">
    <ul>
        <li><a href="#" class="li-one" >Home</a></li>
        <li><a href="#" class="li-five">About Us</a></li>
        <li><a href="#" class="li-three">Portfolio</a></li>
        <li><a href="#" class="li-two">Why Us</a></li>
        <li><a href="#" class="li-four">Contact Us</a></li>
    </ul>
 </div>

Ниже я перечислил все классы.

.li-one .li-two .li-three .li-four .li-five

Я провел потерянный час, пытаясь понять это без результатов

Большое спасибо за Вашу справку заранее

8
задан Rik Heywood 15 March 2011 в 13:00
поделиться

5 ответов

Что-то вроде следующее: 

function randOrd() {
    return (Math.round(Math.random())-0.5); 
}

$(document).ready(function() {
    var klasses = [ 'li-one', 'li-two', 'li-three', 'li-four', 'li-five' ];
    klasses.sort( randOrd );
    $('#menu ul li a').each(function(i, val) {
        $(this).addClass(klasses[i]);
    });
});
10
ответ дан 5 December 2019 в 10:41
поделиться

Используя jQuery, вы можете сделать что-то вроде 

var classes = ['li-one', 'li-two', 'li-three', 'li-four', 'li-five'];

function randomizeList(listObj) {
    $(listObj).each(function() {
        $(this).addClass(classes[Math.Random()*classes.size]);
    });
}
5
ответ дан 5 December 2019 в 10:41
поделиться

Я бы посмотрел на http://blog.mastykarz.nl/jquery-random-filter/ 

for (c in ['li-one', 'li-two', 'li-three', 'li-four', 'li-five'])
       // select the next link w/o a class starting with "li"
       $("a:not(class^=li):random").addClass(c);
1
ответ дан 5 December 2019 в 10:41
поделиться

Это приведет к гораздо лучшему перемешиванию имен классов, чем обычная случайная функция: 

Array.prototype.shuffle = function (){
    var i = this.length, j, temp;
    if ( i == 0 ) return;
    while ( --i ) {
        j = Math.floor( Math.random() * ( i + 1 ) );
        temp = this[i];
        this[i] = this[j];
        this[j] = temp;
    }
};
var classes = new Array('one', 'two', 'three', 'four', 'five');
classes.shuffle();

var menu = $('#menu ul li');
for (var i = 0; i < menu.length; i++)
{
    menu.eq(i).children('a').addClass('li-'+classes[i]);
}
0
ответ дан 5 December 2019 в 10:41
поделиться 
 <script type="text/javascript">
 var style=new Array('li-one','li-two','li-three','li-four','li-five');
 var l=style.length;
 $(document).ready(function(){
  var t=(new Date()).getSeconds()%l;

  if(t>l){ while(t>l) t=(new Date()).getSeconds()%l; }

  var i=t;

  $("div#menu ul li a").each(function(a,b){
   if(i<l){
    $(b).addClass(style[i++]);
   }else{
    if(t>=0){
     $(b).addClass(style[--t]);
    }
   }
  });
 });
 </script>
0
ответ дан 5 December 2019 в 10:41
поделиться
Другие вопросы по тегам:

Похожие вопросы: