每次按下按钮如何产生随机选项？答案

【问题标题】：How press button produces random options every time?每次按下按钮如何产生随机选项？
【发布时间】：2021-01-30 12:44:45
【问题描述】：

 $(function () {
            $("#question2").hide();
            const options = [$("#option1"), $("#option2"), $("#option3"), $("#option4")];

           let randomOption =function (){const texts = options
                .map(opt => opt[0].textContent)
                .sort(() => .5 - Math.random());

            $("#option1").text(texts[0]);
            $("#option2").text(texts[1]);
            $("#option3").text(texts[2]);
            $("#option4").text(texts[3]);}



            $("#question1 button").click(function () {
                $("#question1").fadeOut();
                $("#question2").fadeIn();randomOption()
            })
            $("#question2 button").click(function () {
                $("#question2").fadeOut();
                $("#question1").fadeIn();randomOption()
            })

            console.log(randomOption())
           

        })

 <div id="question1">question 1
        <button id=option1>1</button>
        <button id=option2>2</button>
        <button id=option3>3</button>
        <button id=option4>4</button>
    </div>
    <div id="question2">question 2
        <button id=option1>1</button>
        <button id=option2>2</button>
        <button id=option3>3</button>
        <button id=option4>4</button>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

为什么函数调用不起作用。

当我按下 question2 按钮时。

question2 选项不是随机的？甚至调用 randomOption()。

这段代码有什么问题？

console.log(randomOption()) 未定义？

【问题讨论】：

你想做什么？

标签： jquery button random option

【解决方案1】：

按钮的元素在 jquery 上被id 选中，id 应该是唯一，只能调用一次，在这种情况下，$("#option1") 到 @987654324 @ 仅在 <div id="question1"> 中生效一次，因此解决方案是从 id 更改为 class。

 $(function () {
            $("#question2").hide();
            const options = [$(".option1"), $(".option2"), $(".option3"), $(".option4")];

           let randomOption =function (){const texts = options
                .map(opt => opt[0].textContent)
                .sort(() => .5 - Math.random());

            $(".option1").text(texts[0]);
            $(".option2").text(texts[1]);
            $(".option3").text(texts[2]);
            $(".option4").text(texts[3]);}



            $("#question1 button").click(function () {
                $("#question1").fadeOut();
                $("#question2").fadeIn();randomOption()
            })
            $("#question2 button").click(function () {
                $("#question2").fadeOut();
                $("#question1").fadeIn();randomOption()
            })

            console.log(randomOption())
           

        })

  <div id="question1">question 1
        <button class=option1>1</button>
        <button class=option2>2</button>
        <button class=option3>3</button>
        <button class=option4>4</button>
    </div>
    <div id="question2">question 2
        <button class=option1>1</button>
        <button class=option2>2</button>
        <button class=option3>3</button>
        <button class=option4>4</button>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

【讨论】：