基于jQuery实现随机数生成与筛选展示功能的技术咨询

我帮你搞定了整个功能，完全用$.grep()实现筛选，同时把按钮和所有功能关联起来，同一页面就能完成所有需求。下面是完整的可运行代码，我会一步步解释细节：

<!DOCTYPE html>
<html>
<head>
    <title>随机数筛选工具</title>
    <!-- 引入jQuery，这里用CDN版本，你也可以换成本地文件 -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        /* 简单美化页面，方便查看结果 */
        .result-section {
            margin: 15px 0;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        button {
            padding: 8px 16px;
            cursor: pointer;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <button id="btn">生成并筛选随机数</button>

    <div class="result-section">
        <h3>生成的20个随机数：</h3>
        <div id="random-nums"></div>
    </div>

    <div class="result-section">
        <h3>其中的奇数：</h3>
        <div id="odd-nums"></div>
    </div>

    <div class="result-section">
        <h3>大于等于50的数：</h3>
        <div id="above-fifty"></div>
    </div>

    <script>
        $(document).ready(function() {
            // 绑定按钮点击事件，所有逻辑都在这里触发
            $("#btn").click(function() {
                // 1. 生成20个0-100之间的随机整数
                let randomNumbers = [];
                for (let i = 0; i < 20; i++) {
                    // Math.random()生成0-1小数，乘101后取整得到0-100的整数
                    let num = Math.floor(Math.random() * 101);
                    randomNumbers.push(num);
                }

                // 2. 用$.grep()筛选奇数：判断数字除以2的余数不为0
                let oddNumbers = $.grep(randomNumbers, function(num) {
                    return num % 2 !== 0;
                });

                // 3. 用$.grep()筛选大于等于50的数
                let aboveFiftyNumbers = $.grep(randomNumbers, function(num) {
                    return num >= 50;
                });

                // 4. 把结果渲染到页面，空结果时显示友好提示
                $("#random-nums").text(randomNumbers.join(", "));
                $("#odd-nums").text(oddNumbers.length > 0 ? oddNumbers.join(", ") : "没有奇数");
                $("#above-fifty").text(aboveFiftyNumbers.length > 0 ? aboveFiftyNumbers.join(", ") : "没有大于等于50的数");
            });
        });
    </script>
</body>
</html>

关键细节拆解： #

• 按钮关联逻辑：把生成、筛选、渲染的所有逻辑都封装在$("#btn").click()回调里，点击按钮就会触发全流程，完美解决你提到的“无法关联按钮”的问题。
• $.grep()的核心用法：这个方法专门用于数组过滤，第一个参数是原数组，第二个参数是回调函数——返回true的元素会被保留到新数组：
  • 筛选奇数：num % 2 !== 0，因为奇数除以2的余数是1，不等于0
  • 筛选≥50的数：直接判断num >= 50即可
• 随机数生成：Math.floor(Math.random() * 101)确保生成0到100（包含两端）的整数，循环20次刚好得到20个随机数。
• 页面渲染优化：用join(", ")把数组转成逗号分隔的字符串，同时处理了空结果的情况（比如没有奇数时显示提示），提升用户体验。

你直接把这段代码保存成HTML文件，打开就能用，所有功能都在同一页面完成。

内容的提问来源于stack exchange，提问作者Chloe Harrison