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，它们使连接字符串和变量更加清晰。

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

3 个答案: