引用数组中的对象时遇到问题答案

【问题标题】：Having trouble referring to object within array引用数组中的对象时遇到问题
【发布时间】：2015-07-26 19:06:37
【问题描述】：

我正在尝试为类编写一个 html 页面，该页面使用下拉菜单允许用户拉出相关信息列表。不幸的是，我无法弄清楚如何对数组中的信息进行脚本调用。 jsfiddle 有完整的 html 部分，任何帮助将不胜感激。

请记住，我不太擅长术语，所以尽可能具体。特别是关于 jQuery，我们的老师并没有过多地讨论它，所以这对我来说是一个非常神秘的问题。

另外，我确实计划向数组中的对象添加更多信息，但在我让它工作之前，我不想把时间浪费在我可能需要重组的事情上。

http://jsfiddle.net/GamerGorman20/nw8Ln6ha/11/

 var favWebComics = [
    Goblins = {1: "www.goblinscomic.org"},
    GirlGenious = {1: "www.girlgeniousonline.com"},
    GrrlPower = {1: "www.grrlpowercomic.com"}
    ];

    var myFunction = function() {
        var x = document.getElementById("mySelect").value;

        document.getElementById("demo").innerHTML = "You selected: " + x;
        document.getElementById("web").innerHTML = favWebComics.x;
    };

同样，JSFiddle 链接有完整的 html，目前有一些未使用的项目，但我确实计划很快添加更多。

我的下一个计划是将图像合并到对象中，以便为每个选择选项加载一张图片。我将如何处理？

【问题讨论】：

为什么你的favWebComics数组中有变量赋值？
我认为您将从通过教程回顾 JavaScript 的基本语法和功能中受益最大：developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

标签： javascript html arrays image object

【解决方案1】：

我有你的解决方案，显示：

选定的选项
网址
图片

请检查小提琴。 http://jsfiddle.net/nw8Ln6ha/13/

你的对象是：

var favWebComics = {
        Goblins :  {url:"www.goblinscomic.org", img:"img1"},
        GirlGenious : {url:"www.girlgeniousonline.com", img:"img2"},
        GrrlPower : {url:"www.grrlpowercomic.com", img:"img3"}
        };

您的显示代码：

document.getElementById("demo").innerHTML = "You selected: "+x+" "+ eval("favWebComics[\""+x+"\"].url")+" "+ eval("favWebComics[\""+x+"\"].img");

【讨论】：

你确定？我认为应该避免 eval ？

【解决方案2】：

从技术上讲，您将数组视为字典。如果您打算这样做但以后仍想添加更多信息，则需要在代码上使用括号{}。

var favWebComics = {
   Goblins: ["www.goblinscomic.org"],
   GirlGenious: ["www.girlgeniousonline.com"],
   GrrlPower: ["www.grrlpowercomic.com"]
};

同样对于 javascript，只要您搜索键值存储，使用大括号 [] 进行调用。这是下面的工作代码。

document.getElementById("web").innerHTML = favWebComics[x];

【讨论】：

为什么要把 URL 放到一个列表中？
我把它放在列表中，这样它就可以被称为他们试图达到它的方式。根据示例，他们只想将输出用于搜索。他们还说他们想稍后添加更多信息，所以我想直到我们知道其他信息不是更多链接的事实，一个列表才是正确的答案。
所以我进行了更改，并通过一些快速搜索找到了另一种使图像正常工作的方法。（我正在加倍“s）这是当前的表格。jsfiddle.net/GamerGorman20/nw8Ln6ha/20关于在哪里寻找随机按钮的任何建议？我的计划是创建一个按钮，该按钮将使用 onclick 来激活数学随机化器。

【解决方案3】：

[ ] 用于数组，用数字索引。如果你想要命名属性，你应该使用一个对象，它使用{ } 作为它的文字：

var favWebComics = {
    Goblins: "www.goblinscomic.org",
    GirlGenious: "www.girlgeniousonline.com",
    GrrlPower: "www.grrlpowercomic.com"
};

= 用于分配给变量，而不是在对象中指定属性名称。

那么你需要了解. 和[] 表示法访问对象的区别。 .x 表示查找字面名称为x 的属性，[x] 表示使用x 的值作为属性名称。见Dynamically access object property using variable。

应该是这样的：

document.getElementById("web").innerHTML = favWebComics[x];

【讨论】：

【解决方案4】：

您的数组结构不正确，对象会更适合：

var favWebComics = {
    Goblins : "www.goblinscomic.org",
    GirlGenious : "www.girlgeniousonline.com",
    GrrlPower : "www.grrlpowercomic.com"
    };

那么您应该能够按照您的意愿访问属性

favWebComics.Goblins
favWebComics.GirlGenious
favWebComics.GrrlPower

【讨论】：