Question

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

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

Answer 1

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

});

<强> Check FIDDLE

Answer 2

这可能写得更短，但我希望它更详细，以便你可以看到这些步骤。从技术上讲，这可以选择相同的两次。如果您愿意，可以使用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>

Answer 3

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的好建议。

选择随机列表项并添加类

3 个答案: