将数组中的多个数字插入到 HTML答案

【问题标题】：Insert several numbers from array in to HTML将数组中的多个数字插入到 HTML
【发布时间】：2016-03-08 16:14:23
【问题描述】：

我有两个数组：

var prices = [9.15, 10.10, 13.15, 4, 5, 6, 7, 8];
var premiumPrice = [9.15, 10.10, 13.15, 4, 5, 6, 7, 8];

加载 html 文档时，我需要将名为“prices”的数组中的数字插入到<div>，其中 id 对应于数组的索引，将“premiumPrice”插入另一个<div>。我认为 html 文档可能看起来像这样（注意 id 在哪里）：

<div class="header" id="1">
    <h2>BTC <span>1,00</span><em>  /Month</em></h2>

    <div class="price blue">SMALL</div>
</div><!--/ header -->


<div class="details">
    <ul>
        <li><b>1 000</b> sites</li>
    </ul>

<div class="specialPromo">
    <input type="checkbox"><label>Add <b>PREMIUM</b><br><em>(+<span id="1">0,15</span> usd/month)</em></label>

</div><!--/ specialPromo -->
</div><!--/ details -->
    <a href="/cos/cos/ID" class="btn ">SELECT</a>
</div><!--/ item -->

按下复选框后div header必须返回premiumPrice+price（来自数组）。

我不知道如何做这份工作。

【问题讨论】：

请将您的实际 HTML 复制到问题中，而不是它的屏幕截图，以及您为解决问题而编写的 JS 代码。
@Roy 目前，我通过使用从 html 文件中获取数字的正则表达式解决了这个问题（在从底部（输入）粘贴 5 行和从顶部粘贴 2 的代码中）。单击按钮（btn 类）后，从 html 中获取数字，将它们添加并扔到第 2 行（在上面的示例中）

标签： javascript jquery html arrays

【解决方案1】：

这是获取元素并设置其内部值的方式。还有其他方法，但我不确定您要做什么，所以这是我能想到的最通用的方法。这是一个很好的起点。

element = document.getElementById('1');

element.innerHTML = 'someValue'

【讨论】：

【解决方案2】：

也许是这样的？

var prices = [9.15, 10.10, 13.15, 4, 5, 6, 7, 8];
//loop through prices
for (var i=0;i<prices.length;i++){
    var idString = i.toString();
    //get the element and 
    document.getElementById(idString).innerHTML = prices[i];
}

【讨论】：

【解决方案3】：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script>
        var prices = [9.15, 10.10, 13.15, 4, 5, 6, 7, 8];
        var premiumPrice = [9.15, 10.10, 13.15, 4, 5, 6, 7, 8];


        window.addEventListener( 'load', function(){
            var id = document.getElementsByClassName( 'header' )[ 0 ];
            var price = id.querySelector( 'span' );

            price.textContent = prices[ id.getAttribute( 'id' ) ];

            document.getElementsByTagName( 'input' )[ 0 ]
                .addEventListener( 'click', function(){
                    var price_specialPromo = document.getElementsByClassName( 'specialPromo' )[ 0 ]
                        .querySelector( 'span' );

                    price_specialPromo.textContent = prices[ id.getAttribute( 'id' ) ] + premiumPrice[ id.getAttribute( 'id' ) ];
                });
        });
    </script>
</head>
<body>
    <div class="header" id="1">
        <h2>BTC <span>1,00</span><em>  /Month</em></h2>

        <div class="price blue">SMALL</div>
    </div><!--/ header -->


    <div class="details">
        <ul>
            <li><b>1 000</b> sites</li>
        </ul>

        <div class="specialPromo">
            <input type="checkbox"><label>Add <b>PREMIUM</b><br><em>(+<span id="1">0,15</span> usd/month)</em></label>
        </div><!--/ specialPromo -->
    </div><!--/ details -->

    <a href="/cos/cos/ID" class="btn ">SELECT</a>
</body>
</html>

【讨论】：