在 Javascript 中将类分配给数组

Question

我有一个相当简单的问题，我似乎无法弄清楚。

我想在不同的图像上显示来自简单数组的不同元素。 这些元素是字符串，我想为它们添加一些样式，因此我需要使它们成为 div 的一部分，该 div 将成为字符串所在图像的 div 的一部分。

如果文本不在数组中，就不会有问题，因为我可以这样做：

var text = "<div class='text'>SOME TEXT HERE</div>";
$('.image').append(text);

在这种情况下，它工作正常，我可以将样式应用于现在是具有“文本”类的 div 的一部分的文本。

但是，我需要在不同的图像上显示不同的文本字符串，因此我将它们存储如下：

var textArray = ["TEXT1", "TEXT2", "TEXT3", "TEXT4"];

我想要做的就是让textArray成为 div 的一部分，然后我可以向其中添加一些样式。

我试过这个，但它不起作用，因为textArray不会作为文本 div 的一部分附加：

var text = "<div class='text'>textArray</div>";
$('.image').append(textArray[2]);

我将不胜感激任何帮助，谢谢！

Answer 1

我不确定我是否正确理解了这个问题，但你可以通过你的数组并为每个文本注入你想要的元素。

对于数组中的每个文本：

var textArray = ["TEXT1", "TEXT2", "TEXT3", "TEXT4"];
for(var key in textArray) {
   var this_text = textArray[key]
   $('.image/element selector of your liking (can also be dynamic)').append("<div class='text'>"+this.text+"</div>");
}

您还可以遍历每个图像，然后根据数组位置添加文本：

对于页面上的每个图像，根据文本：

$(".image").each(function( i ) {
       $(this).append("<div class='text'>"+textArray[i]+"</div>");
}

只需确保数组中的每个图像都有一个元素。

Answer 2

创建一个元素，向其中添加文本，然后将其添加到图像中。

我建议您立即创建一个断开连接的 jQuery 对象。 这是一个您可以操作的 html 元素，但尚未附加到 DOM。 您可以通过$('<html code here>') 。
这样您就可以使用 jQuery 提供的所有工具。
然后将文本添加到其中，您现在不必将字符串粘贴在一起，并且可以使用 jQuery text()函数添加文本。 新元素完成后，您可以将其添加到图像类中。

您也可以通过这种方式保存对文本容器元素的引用并重复使用它，就像我在下面的简单动画函数中所做的那样。

 var current = 2; var textArray = ["TEXT1", "TEXT2", "TEXT3", "TEXT4"]; var $text = $("<div class='text'>"); $text.text(textArray[current]); $('.image').append($text); /** * Just to illustrate that $text can be reused. */ $('button').on('click', (e) => { setInterval(() => { current++; if(current >= textArray.length) { current = 0; } $text.text(textArray[current]); },1000); });

 .image { width: 300px; height: 200px; background-color: green; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="image"> </div> <button>Rotate the texts</button>

在 Javascript 中将类分配给数组

问题描述

2 个解决方案

解决方案1
0 2020-01-23 09:19:47

解决方案2
0 已采纳 2020-01-23 09:20:00

在 Javascript 中将类分配给数组

问题描述

2 个解决方案

解决方案1 0 2020-01-23 09:19:47

解决方案2 0 已采纳 2020-01-23 09:20:00

解决方案1
0 2020-01-23 09:19:47

解决方案2
0 已采纳 2020-01-23 09:20:00