Question

我正在使用这个switch语句在404页面上加载不同的图像和文本，它工作正常但我只是想知道是否有更好的方法来编写它？速记呢？

<script>
 var funFacts = Math.floor(Math.random() * 7) + 1;
switch (funFacts) {
    case 1:
        document.getElementById("funFactText").innerHTML = "In Florida, it is against the law to put livestock in a school bus.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff1.jpg")";
        break;

    case 2:
        document.getElementById("funFactText").innerHTML = "In Texas, it's against the law for anyone to have a pair of pliers in his or her possession.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff2.jpg")";
        break;

    case 3:
        document.getElementById("funFactText").innerHTML = "In Alaska, it is illegal to look at a moose from the window of an aircraft or another flying vehicle. It is also illegal to push a live moose out of a moving aircraft.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff3.jpg")";
        break;

    case 4:
        document.getElementById("funFactText").innerHTML = "In Ohio, women are prohibited from wearing patent leather shoes in public.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff4.jpg")";
        break;

    case 5:
        document.getElementById("funFactText").innerHTML = "By law, everybody in Vermont must take at least one bath a week.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff5.jpg")";
        break;

    case 6:
        document.getElementById("funFactText").innerHTML = "In Illinois, the law is that a car must be driven with the steering wheel.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff6.jpg")";
        break;

    case 7:
        document.getElementById("funFactText").innerHTML = "California law prohibits a woman from driving a car while dressed in a housecoat.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff7.jpg")";
        break;
}
</script>

Answer 1

是的，使用数组作为事实，以及一些简单的字符串连接：

var funFacts = [
  "In Florida, it is against the law to put livestock in a school bus.",
  "In Texas, it's against the law for anyone to have a pair of pliers in his or her possession.",
  "In Alaska, it is illegal to look at a moose from the window of an aircraft or another flying vehicle. It is also illegal to push a live moose out of a moving aircraft.",
  "In Ohio, women are prohibited from wearing patent leather shoes in public.",
  "By law, everybody in Vermont must take at least one bath a week.",
  "In Illinois, the law is that a car must be driven with the steering wheel.",
  "California law prohibits a woman from driving a car while dressed in a housecoat."
];
var funFact = Math.floor(Math.random() * 7);
document.getElementById("funFactText").innerHTML = funFacts[funFact];
var baseSrc = "@Url.Content("~/themes/PG/Content/Images/ff")";
document.getElementById("funFactImg").src = baseSrc + (funFact + 1) + '.jpg';

Answer 2

可能看起来更清晰，放入一个数组，然后退出数组。

var funFacts = [
{
    text: "In Florida, it is against the law to put livestock in a school bus.",
    image: "~/themes/PG/Content/Images/ff1.jpg"
},
{
    text: "In Texas, it's against the law for anyone to have a pair of pliers in his or her possession.",
    image: "~/themes/PG/Content/Images/ff2.jpg"
},
...
];
var factIndex = Math.floor(Math.random() * funFacts.length); // can be combined with line below
var fact = funFacts[factIndex];
document.getElementById("funFactText").innerHTML = fact.text;
document.getElementById("funFactImg").src = "@Url.Content(\"" + fact.image + "\")";

Answer 3

创建一个如下所示的对象数组：

{ text: "some fact...", url: "some url" }

让我们调用这个数组facts。

然后：

var randomFact = facts[Math.floor(Math.random() * 7) + 1];

document.getElementById("funFactText").innerHTML = randomFact.text;
document.getElementById("funFactImg").src =randomFact.url;

Answer 4

您可以完全取消开关，将数据存储在数组中，并根据所选索引分配值：

var textElement = document.getElementById("funFactText");
var imgElement = document.getElementById("funFactImg");

var funFacts = Math.floor(Math.random() * 7);
var entries = [ 
    {
        text: "In Florida, it is against the law to put livestock in a school bus.",
        image: "@Url.Content("~/themes/PG/Content/Images/ff1.jpg")"
    },
    {
        text: "In Texas, it's against the law for anyone to have a pair of pliers in his or her possession.",
        image: "@Url.Content("~/themes/PG/Content/Images/ff2.jpg")"
    },
    {
        text: "In Alaska, it is illegal to look at a moose from the window of an aircraft or another flying vehicle. It is also illegal to push a live moose out of a moving aircraft.",
        image: "@Url.Content("~/themes/PG/Content/Images/ff3.jpg")"
    },
    {
        text: "In Ohio, women are prohibited from wearing patent leather shoes in public.",
        image: "@Url.Content('~/themes/PG/Content/Images/ff4.jpg')"
    },
    {
        text: "By law, everybody in Vermont must take at least one bath a week.",
        image: "@Url.Content("~/themes/PG/Content/Images/ff5.jpg")"
    },
    {
        text: "In Illinois, the law is that a car must be driven with the steering wheel.",
        image: "@Url.Content('~/themes/PG/Content/Images/ff6.jpg')"
    },
    {
        text: "California law prohibits a woman from driving a car while dressed in a housecoat.",
        image: "@Url.Content("~/themes/PG/Content/Images/ff7.jpg")"
    }
];

textElement.innerHTML = entries[funFacts - 1].text;
imgElement.src = entries[funFacts - 1].image;

</script>

Answer 5

注意重复代码并尝试将它们压缩到工作流程中，并检查哪些变量有关切换语句的变化。我不会说它是速记，但代码较少。

<script>
     var funFacts = Math.floor(Math.random() * 7) + 1;
     MyFunction(funFacts);

    function MyFunction(fun)
    {
       var text="";
       var link="";
        switch (fun) {
        case 1:
            text = "In Florida, it is against the law to put livestock in a school bus.";
           link = "~/themes/PG/Content/Images/ff1.jpg";
            break;
        case 2:
            text = "In Texas, it's against the law for anyone to have a pair of pliers in his or her possession.";
            link = "~/themes/PG/Content/Images/ff2.jpg";
            break;
        case 3:
            text = "In Alaska, it is illegal to look at a moose from the window of an aircraft or another flying vehicle. It is also illegal to push a live moose out of a moving aircraft.";
            link = "~/themes/PG/Content/Images/ff3.jpg";
            break;
        case 4:
            text = "In Ohio, women are prohibited from wearing patent leather shoes in public.";
            link = "~/themes/PG/Content/Images/ff4.jpg";
            break;
        case 5:
            text = "By law, everybody in Vermont must take at least one bath a week.";
            link = "~/themes/PG/Content/Images/ff5.jpg";
            break;
        case 6:
            text = "In Illinois, the law is that a car must be driven with the steering wheel.";
            link = "~/themes/PG/Content/Images/ff6.jpg";
            break;
        case 7:
            text = "California law prohibits a woman from driving a car while dressed in a housecoat.";
            link = "~/themes/PG/Content/Images/ff7.jpg";
            break;
        }
        document.getElementById("funFactText").innerHTML = text;
        document.getElementById("funFactImg").src = "@Url.Content(link);
    }
    </script>

反正有没有减少这个JavaScript switch语句？

5 个答案: