Question

我知道这是一个相当详细记录的内容，但我在应用这种情况时遇到了一些严重的问题。

我需要提出一种基本的说法：如果页面上显示“电话号码” - ＆gt;随机替换为image1，image2或image3。我需要它发生五次，其中三个可能的图像之一将被显示，代替5个不同的“电话号码”。

最初我考虑从创建2个独立的数组开始。一个用于电话号码的数组和一个用于替换它的图像的数组，但我完全不知道如何将三个图像中的一个随机应用到单个数组元素中。

非常感谢任何想法或灵感。

Answer 1

我认为主绑定将是定位电话号码，除非您将整个页面转换为HTML代码，并将其全部放回去，这将是不理想的。

您可以通过制作共享相同索引的两个数组或元组数组（仅包含两个条目的对象）来保持电话号码/图像配对列表。

var phoneReplacements = [
                          { 'phone': '01234 567890', 'image': 'phone-support.jpg' },
                          { 'phone': '01234 000000', 'image': 'phone-customer.jpg' },
                          { 'phone': '01234 999999', 'image': 'phone-technical.jpg' }
                        ];

然后你可以循环查找和替换它们。

for (replacementIndex in phoneReplacements) {
    var cPhoneNumber = phoneReplacements[replacementIndex]['phone'];
    var cImageSrc = phoneReplacements[replacementIndex]['image'];

    /* find all elements containing phone number text and loop */

    /* get content as HTML */
    var cContent = cElement.innerHTML;

    /* replace text with image */
    var cNewContent = cContent.replace("/" + cPhoneNumber + "/g", '<img src="' + cImageSrc + '" alt="' + cPhoneNumber + '" />');

    /* set new content */
    cElement.innerHTML = cNewContent;

    /* repeat for all matching elements */
}

使用jQuery可以使事情变得更容易，诀窍是找到电话号码，这基本上意味着搜索页面上的所有文本节点。

Javascript：查找并替换动态生成的文本

1 个答案: