Question

如何通过数组键循环将其值输出到HTML？

我正在使用的布局是缩略图网格，3列乘2行。每个缩略图都有一个标题。选择任何缩略图会打开一个隐藏的容器，该容器也是一个包含3列和2行的网格。在那个隐藏的容器中，许多图像和标题将是相同的，所以不是有一大堆重复的HTML我想我可以将每个存储在一个数组中并引用每个相关的值。我现在只是坚持如何创建循环。

var img=[
    'image01.jpg','image02.jpg','image03.jpg','image04.jpg'
]
var details=[
    'aaaaaa','bbbbbb','cccccc','dddddd'
];

$( "#yin" ).click(function() {
    var img = [0,2];        
    var details = [0,1];

    $(step).each(function() {
        document.getElementById("img").innerHTML();
    });
    $(imgs).each(function() {
        document.getElementById("img").innerHTML();
    });
});


<div class="container">
    <ul class="row-fluid">
        <li class="span4" id="yin">
            <div class="row-fluid">
                <img src="yin.jpg" />
                <h3>Yin</h3>
            </div>
        </li>
        <li class="span4" id="yang">
            <div class="row-fluid">
                <img src="yang.jpg" />
                <h3>Yang</h3>
            </div>
        </li>
    </ul>
    <div class="row-fluid">
        <div class="span12">
            <div class="show-details details">
                <div class="detail-content">

                    <div id="img">
                    <!-- Loop (for yin would be image01, and image03) -->
                    </div>
                    <div id="details">
                    <!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

在进入循环之前，该代码存在问题，img和details变量正在click函数中重新声明。他们打算做什么？从代码中的注释中，它们似乎是指定要使用的数组的索引。

var images = ['image01.jpg','image02.jpg','image03.jpg','image04.jpg'];
var details = ['aaaaaa','bbbbbb','cccccc','dddddd'];

$( "#yin" ).click(function() {
    var imgIndices = [0,2];
    var detailIndices = [0,1];

    $("#img").html("");
    $("#details").html("");

    $(imgIndices).each(function(i, o) {
        $("#img").append("<img src=\"" + images[o] + "\"/>");
    });
    $(detailIndices).each(function(i, o) {
        $("#details").append("<p>" + details[o] + "</p>");
    });
});


<div class="container">
    <ul class="row-fluid">
        <li class="span4" id="yin">
            <div class="row-fluid">
                <img src="yin.jpg" />
                <h3>Yin</h3>
            </div>
        </li>
        <li class="span4" id="yang">
            <div class="row-fluid">
                <img src="yang.jpg" />
                <h3>Yang</h3>
            </div>
        </li>
    </ul>
    <div class="row-fluid">
        <div class="span12">
            <div class="show-details details">
                <div class="detail-content">

                    <div id="img">
                    <!-- Loop (for yin would be image01, and image03) -->
                    </div>
                    <div id="details">
                    <!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我会将click函数输出到命名函数，然后传入数组。

Javascript foreach数组键值，输出到html

1 个答案: