【问题标题】:Looping and displaying javascript array content, from html data attribute从 html 数据属性循环和显示 javascript 数组内容
【发布时间】:2017-07-26 19:31:07
【问题描述】:

我有一个通过 html 数据元素传递的数组

  <button type="button" class="open-my-modal btn btn-primary" 
data-number="'.htmlspecialchars(json_encode($myArray), ENT_QUOTES, 'UTF-8')

数组包含一组不同的数组,格式如下

Array(
  [0] => ABC
  [1] => DEF
  [2] => GHI
  [3] => JKL
 )
Array(
 [0] => MNO
 [1] => 123A
 [2] => 123B
 [3] => 123C
)
Array(
[0] => orange
[1] => yellow
[2] => green
[3] => blue
)

数据正在被传递到如下所示的字段 id 模式

<tr>
    <td><span id ="exampleone"></span></td>
    <td><span id ="exampletwo"></span></td>
    <td><span id ="examplethree"></span></td>
    <td><span id ="examplefour"></span></td>
</tr>

以及一个链接 id 和数据的脚本

<script>

$(document).ready(function () {             
$(".open-my-modal").click(function(){
  $("#exampleone").html($(this).data("number")[0]);

这会在屏幕上正确显示 ABC、DEF、GHI、JKL。但我想动态地做到这一点。例如

<td><span id ="exampleone"></span></td> <!-- output will be ABC-->
<td><span id ="exampleone"></span></td><!-- output will be DEF-->
etc, etc

我正在动态提取我的数据,因此每个数组可能有超过 4 个条目,它会不时变化。

我被困在哪里需要获取数字(数据)的长度以及如何动态生成和 id

(<td><span id ="dynamically generated">) 

然后如何将id与正确的动态链接

data($("#number").html($(this).data("number"));)

【问题讨论】:

  • 您的问题不明确且有点混乱。
  • 我试图动态循环遍历我的数组并在引导模式 元素中显示内容
  • $(this).data('number').length 将返回数组中元素的数量。

标签: javascript php jquery html arrays


【解决方案1】:

要动态生成列表中的项目,您可以使用以下代码

HTML(替换您的代码)

&lt;tr id="parentNode"&gt;&lt;/tr&gt;

JavaScript(放入您的 jQuery 代码中)

$.each($(this).data('number'), function(index, value){ $("#parent").append($('<td>').append($('<span>', {'id' : 'example' + index , 'text' : value}))); });

这将生成&lt;td&gt;&lt;span id=example1&gt;value1&lt;/span&gt;&lt;/td&gt; 等等。

我强烈建议您使用 AJAX 从您的服务器获取数据。 这是guide

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签