在Javascript中将类分配给数组
Posted
技术标签:
【中文标题】在Javascript中将类分配给数组【英文标题】：Assigning a class to an array in Javascript 【发布时间】：2020-05-09 12:20:01 【问题描述】：我有一个相当简单的问题，我似乎无法弄清楚。
我想在不同图像上显示来自简单数组的不同元素。这些元素是字符串，我想为它们添加一些样式，因此我需要使它们成为 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 不会作为 text div 的一部分附加：
var text = "<div class='text'>textArray</div>";
$('.image').append(textArray[2]);
如果有任何帮助，我将不胜感激，谢谢！
【问题讨论】：
有多少张图片？ 不确定我是否理解所需的结果。应该是<div class='text'>TEXT1 TEXT2 TEXT3 TEXT4</div> 还是<div class='text'>TEXT1</div><div class='text'>TEXT2</div><div class='text'>TEXT3</div><div class='text'>TEXT4</div>
【参考方案1】：
创建一个元素，将文本添加到其中，然后将其添加到图像中。
我建议您立即创建一个断开连接的 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>【讨论】：
但他已经这样做了？不是要通读数组并为该数组中的每个文本执行此操作吗？ 非常感谢，这成功了！现在我只是想给数组元素添加一些样式，这就解决了！【参考方案2】：我不确定我是否正确理解了这个问题，但您可以浏览您的数组并为每个文本注入您想要的元素。
对于数组中的每个文本：
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>");
只需确保数组中的每个图像都有一个元素。
【讨论】：
以上是关于在Javascript中将类分配给数组的主要内容，如果未能解决你的问题，请参考以下文章
为啥在Javascript中将一个对象分配给另一个变量也会改变初始对象[重复]
在 VBA 中将 Word 对象分配给 Variant 变量