Question

我有一组字符串，我想从中选择将文本插入页面。

字符串存储在一个对象/数组中，如下所示：

var strings = {
    x01: 'Hello world',
    x02: 'Goodbye world'
    x03: 'The quick brown fox',
    x04: 'jumped over'
    x05: 'the lazy dog',
    x06: 'the fat lady sung'
};

在我的HTML中，我的span标签的ID与上面的变量相对应。

但是，在任何一个页面上，任何时候都只会显示一些跨度。因此，例如，可能只有三个：

<span id="x01"></span>
<span id="x04"></span>
<span id="x06"></span>

我想要做的是能够搜索页面以收集与命名约定匹配的所有ID（x后跟两位数），然后将它们与相应的变量匹配，以便我可以填充跨度适当的文字。

类似的东西（这是一个粗略的轮廓，不应被视为实际代码）：

array = getElementsByID(someKindOfMultipleSelect);
for (var key in array)
{
   document.getElementById(**IDandVarName**).innerHTML = strings.**IDandVarName**;
}

尽管在谷歌上做了一些谷歌搜索，我仍然坚持两点。我不知道如何从页面中收集我想要的跨度ID，而且一旦得到它我就不太清楚如何匹配它们。

是的，我是Javascript的小伙子，所以请你解释一下。

感谢您的任何建议。

Answer 1

下面是一个纯粹的（非常简单的）JavaScript解决方案。此解决方案避免收集页面上的所有跨度（效率不高），并且仅通过ID抓取元素。

<强> HTML：

<span id="x01"></span>
<span id="x04"></span>
<span id="x06"></span>

<强> JavaScript的：

var strings = {
    x01: 'Hello world',
    x02: 'Goodbye world',
    x03: 'The quick brown fox',
    x04: 'jumped over',
    x05: 'the lazy dog',
    x06: 'the fat lady sung'
};

for (var key in strings) {
    var obj = document.getElementById(key);

    if(obj)
        document.getElementById(key).innerHTML = strings[key];
}

这是a working fiddle。

Answer 2

这有效：

$('span[id^="x"]').each( // selects all span elements whose id starts with an x
    function(i){
        $(this).text(strings[this.id]);
    });

JS Fiddle demo

已编辑以添加纯JavaScript解决方案（我无法宣誓我最初看到了jquery ...叹息）：

var elems = 'span';

var spans = document.getElementsByTagName(elems);

for (i=0; i<spans.length; i++){
    if (strings[spans[i].id]){
        spans[i].innerHTML = strings[spans[i].id];
    }
}

JS Fiddle demo

参考文献：

attribute-starts-with (^=) selector。
text()。

Answer 3

无需在文档中“搜索”您的ID。您的代码基本上已经完全正确，只需省略第一行并使用循环的key变量：

for (var key in strings)
{
   document.getElementById(key).innerHTML = strings[key];
}

如果有一个ID的元素不存在，这会破坏，所以检查一个好主意：

for (var key in strings)
{
   var element = document.getElementById(key);
   if (element)
       element.innerHTML = strings[key];
}

Answer 4

http://jsfiddle.net/vCwuu/1/

所以不使用jquery就可以做这样的事情

为您可以使用

找到的所有元素添加一个类

<span class="fill-me" id="x01"></span>
<span class="fill-me" id="x04"></span>
<span class="fill-me" id="x06"></span>

找到它们并查看相应的文本

var strings = {
 x01: 'Hello world',
 x02: 'Goodbye world',
 x03: 'The quick brown fox',
 x04: 'jumped over',
 x05: 'the lazy dog',
 x06: 'the fat lady sung'
};

window.onload = function() {
 console.log("sup");
 var spans = document.getElementsByClassName("fill-me");
 for(i in spans) {
  spans[i].innerHTML = strings[spans[i].id];   
 }
};

Answer 5

您可以使用它来检查元素是否存在：

if (document.getElementById('x01')) { // code } 如果有太多元素可供使用，您可以为所有元素指定相同的名称，如

<div id="x01" name="xx"></div>
<div id="x02" name="xx"></div>

然后使用

arr = document.getElementsByName("xx");

获取页面上的所有div。

如何在页面中搜索某些ID并将它们与Javascript中的变量相匹配？

5 个答案: