使用Jquery显示随机div

使用jQuery显示随机div的完整指南

基础概念

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。使用jQuery可以轻松实现随机显示div元素的功能。

实现方法

1. 基本实现

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .random-div {
            display: none;
            width: 200px;
            height: 100px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <button id="show-random">显示随机div</button>
    
    <div class="random-div" id="div1">Div 1</div>
    <div class="random-div" id="div2">Div 2</div>
    <div class="random-div" id="div3">Div 3</div>
    <div class="random-div" id="div4">Div 4</div>
    <div class="random-div" id="div5">Div 5</div>

    <script>
        $(document).ready(function() {
            $('#show-random').click(function() {
                // 隐藏所有div
                $('.random-div').hide();
                
                // 获取所有div的数组
                var divs = $('.random-div').toArray();
                
                // 随机选择一个div
                var randomDiv = divs[Math.floor(Math.random() * divs.length)];
                
                // 显示选中的div
                $(randomDiv).show();
            });
        });
    </script>
</body>
</html>

2. 进阶实现（带动画效果）

$(document).ready(function() {
    $('#show-random').click(function() {
        // 隐藏所有div（带淡出效果）
        $('.random-div').fadeOut(300);
        
        // 获取所有div的数组
        var divs = $('.random-div').toArray();
        
        // 随机选择一个div
        var randomDiv = divs[Math.floor(Math.random() * divs.length)];
        
        // 显示选中的div（带淡入效果）
        $(randomDiv).delay(300).fadeIn(300);
    });
});

常见问题及解决方案

1. 为什么随机显示的div有时会重复？

原因：随机选择算法没有排除已经显示的div。

解决方案：可以添加逻辑确保每次选择不同的div：

var lastShownDiv = null;

$('#show-random').click(function() {
    $('.random-div').hide();
    var divs = $('.random-div').not(lastShownDiv).toArray();
    
    if(divs.length === 0) {
        divs = $('.random-div').toArray(); // 如果只有一个div，重置选择
    }
    
    var randomDiv = divs[Math.floor(Math.random() * divs.length)];
    $(randomDiv).show();
    lastShownDiv = randomDiv;
});

2. 如何控制显示多个随机div？

解决方案：修改代码以显示指定数量的随机div：

$('#show-random').click(function() {
    $('.random-div').hide();
    var divs = $('.random-div').toArray();
    var count = 2; // 要显示的div数量
    
    // 随机打乱数组
    for (let i = divs.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [divs[i], divs[j]] = [divs[j], divs[i]];
    }
    
    // 显示前count个div
    for (let i = 0; i < count && i < divs.length; i++) {
        $(divs[i]).show();
    }
});