2

目前我有一个带有菜单 id 的无序列表，并且这个 ul 中的一个列表项有一个“选定”类我想做的是从 ul 中获取所有列表项并从中删除初始选定的类每次刷新页面时，它所在的列表项然后将其分配给同一 ul 中的不同列表项。

这可能吗？实现这一目标的最佳方法是什么？

4

3 回答 3

2 
$(document).ready(function() {

    var $ulLen = $('#menu li').length;

    $('#menu li').removeClass('selected'); // Remove the class

    // Select random li..

    var rand = Math.floor( (Math.random()* $ulLen ) );  // Select  a random li..

     $('#menu li:eq('+ rand + ')').addClass('selected'); 

     // Add the selected class to randomly selected li...

});

检查小提琴

于 2012-10-22T16:03:40.403 回答
1

http://jsfiddle.net/eWbqa/8/

var menu = document.getElementById('menu');
var tags = menu.getElementsByTagName('li');

tags[Math.floor(Math.random() * tags.length)].setAttribute('class', 'selected');

您可以对此进行扩展，但这可以做到。

*编辑以反映 Naveen 的好建议。

于 2012-10-22T16:08:28.940 回答
1

这可能会写得更短，但我希望它更详细，以便您可以看到这些步骤。从技术上讲，这可以两次选择同一个。如果您愿意，您可以使用 LocalStorage 或 cookie 来记住最后一项而不是再次选择它。我追求简单。

<!DOCTYPE html> 
<html>
<head>
    <title>Demo</title> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>


    $(document).ready(function() {

        //remove the selected class from the li that has it
        $("li.selected").removeClass("selected");

        //get all the LIs
        var menuItems = $("ul#menu li");
        //How many do we have?
        var numItems = menuItems.length;
        console.log(numItems);
        //Pick one by randm
        var selected = Math.floor(Math.random()*numItems);
        console.log(selected);
        //And set it
        $("ul#menu li:nth-child("+(selected+1)+")").addClass("selected");
    });
    </script>

    <style>
        li.selected { background-color: red; }
    </style>
</head> 

<body> 

<ul id="menu">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
    <li class="selected">Item four</li>
    <li>Item five</li>
</ul>

</body>
</html>
于 2012-10-22T16:06:46.257 回答