单击按钮时如何运行随机函数？

Question

我有一个弹出窗口，点击后应该会显示 40 种可能结果中的随机人的信息。我尝试使用 switch 语句：

$("#ball").click(function){

var n = Math.floor(Math.random()*2);

switch(n) {
    case 0:
    function(){
        document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
        document.getElementById("popupInfo").innerHTML = '<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
    }
    break;

    case 1:
    function(){
        document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
        document.getElementById("popupInfo").innerHTML = '<h1>TWO</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
    }
    break;

    case 2:
    function(){
        document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
        document.getElementById("popupInfo").innerHTML = '<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
    }
    break;

但它似乎不起作用。

我尝试了 jQuery，将不同​​的函数分配给不同的变量，但不确定单击按钮时如何调用随机函数。

    var gacha1 = function(){
        $(".gachaPopup .avatar").html("<img src='images/catalog/22Josephine.png' alt='' />");
        $(".artistinfo .boxed").html('<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>');
    }

var gacha2 = function(){
        $(".gachaPopup .avatar").html("<img src='images/catalog/21Emily.png' alt='' />");
        $(".artistinfo .boxed").html('<h1>Emily</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>');
    }

var gacha3 = function(){
        $(".gachaPopup .avatar").html("<img src='images/catalog/20Erica.png' alt='' />");
        $(".artistinfo .boxed").html('<h1>Erica</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>');
    }

$("#ball").click(gacha2);

感谢您的帮助，非常感谢。

Answer 1

有很多有效的方法可以做到这一点。与其制作一个 switch case 并增加代码行数，更好的方法是使用随机函数中的值替换和访问一组值。

function randomName() {

  let names = ["Josephine", "TWO", "Josephine"];
  let num = Math.floor(Math.random() * 2);

  document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
  document.getElementById("popupInfo").innerHTML = `<h1>${names[num]}</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>`;
  
  console.log(num);
}

<button onclick="randomName()">Click Here</button>
<div id="popupAvatar"></div>
<div id="popupInfo"></div>

Answer 2

试试这个

    switch(n) {
        case 0:
            document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
            document.getElementById("popupInfo").innerHTML = '<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
            break;
        case 1:
            document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
            document.getElementById("popupInfo").innerHTML = '<h1>TWO</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
            break;
        case 2:
            document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
            document.getElementById("popupInfo").innerHTML = '<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
            break;

如果你愿意，你应该先在某个地方定义函数，然后在 switch 语句中调用它

    switch(n) {
        case 0:
            func_1();
            break;
        case 1:
            func_2();
            break;
        case 2:
            func_3();
            break;

Answer 3

你不是在调用这些函数，你只是在定义它们。您可能想使用所谓的immediately invoked function execution 或IIFE。基本上，这意味着您可以将函数包装在括号中，以便在定义后立即执行。

(function(){
  document.getElementById("popupAvatar").innerHTML = '<img src="images/catalog/22Josephine.png" alt="" />';
  document.getElementById("popupInfo").innerHTML = '<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
})();

但我真的不建议这样做，因为您的代码会变得很长并且充满冗余。相反，您可以构建一个对象数组以在逻辑上保存您的数据，然后从中随机选择一个索引。

let popups = [
  {
    avatar: '<img src="images/catalog/22Josephine.png" alt="" />',
    info: '<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>'
  },
  {
    avatar: '<img src="images/catalog/TWO.png" alt="" />',
    info: '<h1>TWO</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>'
  },
  {
    avatar: '<img src="images/catalog/Bob.png" alt="" />',
    info: '<h1>Bob</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>'
  }
];

let random = Math.floor(Math.random() * (popups.length + 1));

document.getElementById("popupAvatar").innerHTML = popups[random].avatar;
document.getElementById("popupInfo").innerHTML = popups[random].info;

我假设您的实际代码不像您的示例那样冗余，但如果是这样，您实际上可以从数据中提取任何重复的内容，这样您只需编写一次。

let popups = [
  {
    avatar: '22Josephine',
    info: 'Josephine'
  },
  {
    avatar: 'TWO',
    info: 'Two'
  },
  {
    avatar: 'BOB',
    info: 'Bob'
  }
];

let random = Math.floor(Math.random() * (popups.length + 1));

document.getElementById("popupAvatar").innerHTML = `<img src="images/catalog/${popups[random].avatar}" alt="" />`;
document.getElementById("popupInfo").innerHTML = `<h1>${popups[random].info}</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>`;

反引号 `` 是 template literals，它们使连接字符串和变量更加清晰。