單擊按鈕時如何運行隨機函數？

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>`;

反引號 `` 是模板文字，它們使連接字符串和變量更加清晰。