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

Question

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

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

当我按下问题 2 按钮时。

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

这段代码有什么问题？

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

Answer 1

按钮的元素在 jquery 上被 id 选择，id 应该是 唯一的 才能被调用一次，在这种情况下，$("#option1")到$("#option4")只在<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>

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

How press button produces random options every time?

jquery

button

random

option