如何从数组中拉出图像并将其推入 div？答案

【问题标题】：how do you pull an image out of an array and push it into a div?如何从数组中拉出图像并将其推入 div？
【发布时间】：2013-11-07 18:05:38
【问题描述】：

我正在尝试自学 javascript。

我有一个图像数组，我试图让它们从数组中弹出并同时推入一个 div 中，以便它们显示在屏幕上而不是在数组内部。

我这样做是为了尝试创建一个黑杰克纸牌游戏。当然，我需要知道如何做到这一点。

任何帮助将不胜感激。

编辑：我尝试了以下方法：

var cards = [], i=0;
while(i<54){
var card = {'1.png': 1};
card.number = ++i;
card.value = "1.png";
cards.push(dealerField) }

“dealerFIeld”是我的 div。我知道有错误，但它不起作用。但我认为我会撒谎的基本想法就在那里。

【问题讨论】：

使用 jquery 非常简单：使用 $().remove 从数组中弹出删除它并使用 $().html() 放入 div
pop() 将从数组中删除一个对象并返回该对象。

标签： javascript stack

【解决方案1】：

使用jQuery library 扩展您的js 功能。然后使用类似的东西：

$("#a_div_marked_by_an_id").html('string you want to replace the div contents with');

您当然也可以使用varName 之类的变量来代替'string'

上面的例子会插入

<div id="a_div_marked_by_an_id></div>

创造

<div id="a_div_marked_by_an_id>string you want to replace the div contents with</div>

【讨论】：

是的，非常好：meta.stackexchange.com/questions/45176/…
是的，我想知道这个问题——我假设如果他知道 jQ 并想避免它，他会明确说明，因为他知道最简单/常见的反应将涉及它。相反，由于他没有，我认为他对 js 太陌生了，以至于他不了解 jQ，和/或如何“真实世界”（完全有争议的形容词有多准确）这些天的 js 任务似乎从来没有“没有jQuery！”要求，以便他愿意扩大他的选择。我可能是错的，但我觉得因为用 jq 选项回答 js 问题非常直观，ppl 应该说 explct
我认为这里的关键区别在于 jQuery 为这个解决方案带来了什么。 jQuery 从根本上说是一个库，它消除了操作 DOM、样式和 AJAX 的痛苦。这就是它所擅长的。 OP 有一个问题，其中只有很小的一部分涉及 DOM，并且添加 jQuery 对于该任务来说是不必要的。除此之外，OP 表示他们正在尝试“教 [他们自己] javascript”，因此将他们从核心语言中移开并让他们学习库确实是一种伤害。这是我的看法。
“教 [他们自己] javascript”，这是一个公平的观点。我只记得不到一年前，我处于一个非常相似的位置，并满足了我希望听到/学习的答案，但如果 SO 政策与您链接的一样，那么就是这样。
我不会将我的观点/解释与 SO 政策混为一谈：D 另外，我没有否决您的答案，因为这是另一种选择，所以不要觉得我在说您是错误。

【解决方案2】：

首先，不要在循环内重新定义你的变量，那只是浪费。然后，您需要创建一个图像标签并将其附加到循环内的“dealerField”中。

var cards = [],
    i=0,
    card = {},
    img;

while( i < 54 ){
    card.number = ++i;
    card.value = i + ".png";
    img = document.createElement( "img" );
    img.src = card.value;
    img.alt = card.number;

    document.getElementByID( "dealerField" ).appendChild( img );
}

现在，其中一些有点不必要，例如写入该对象，然后立即将其复制到图像中。所以你可以这样做：

var i=0,
    img;

while( i < 54 ){
    img = document.createElement( "img" );
    img.alt = ++i;
    img.src = i + ".png";

    document.getElementByID( "dealerField" ).appendChild( img );
}

重新阅读您的问题后，您的数组 cards 似乎实际上可能有一些东西 - 比如卡片对象。很明显，我不能确定，因为您没有在其中放置任何示例数据，但这是相同的东西，但使用卡片数组作为数据源：

// cards is an array of card objects with some arbitrary structure
var i = 0,
    len = cards.length,
    card,img;

for( i; i < len; i++){
    img = document.createElement( "img" );
    card = cards[ i ];

    img.src = card.value;
    img.alt = card.number;

    document.getElementByID( "dealerField" ).appendChild( img );
}

【讨论】：

更多