使用相同类名的多个span检索文本

Question

我的朋友在他的网站上制作了自己的随机数生成器，并挑战我找到一种可以自动回答随机数生成器的脚本。我是一名工程师，不是程序员，对此一无所知，但我想学习。 到目前为止，我看到的是，随机数生成器将4个不同的段落添加到一个div中，以便它们都出现在自己的框中。它们都有相同的类名，我希望能制作一个脚本，自动从这些段落中检索信息并将其输入到文本框中。

<div id="numgen">
 <div class="numgen-content">
    <span class="numgen-number">3</span>
    <span class="numgen-number">7</span>
    <span class="numgen-number">1</span>
    <span class="numgen-number">9</span>
    <input name="numgen-input" type="text" id="numgen-input">
 </div>
</div>

在浏览互联网并学习了一些jquery知识之后，我找到了这个可以使用的小脚本。

$("span[class='numgen-number']");

然而，当我使用它时，它返回了

<span class=​"numgen-number">​3​</span>​

对于这方面我知之甚少，希望能得到些许协助。

- user3543673

Answer 1

无需jQuery或库：

不需要jQuery或任何库：

var textArray = Array.prototype.slice.call(document.querySelectorAll('.numgen-number')).map(function(span){
    return span.textContent;
});

- csuwldcat

Answer 2

类似这样应该可以解决问题：

function getNumbers() {
    $output = $("#numgen-input");
    $(".numgen-number").each(function(index, item) {
        $output.val($output.val() + $(item).text());
    });
}

然后添加一个按钮或其他东西来调用getNumbers()

演示：http://jsfiddle.net/Ag7La/2/

- logikal

---

我必须以某种特定的方式运行它吗？因为到目前为止，我只是使用Chrome控制台并且一切都正常工作，但是当我尝试这样做时，它给了我“TypeError：undefined不是函数”的错误。 - user3543673

是的，这个小提琴在工作，但当我尝试在网站上使用它时，它只是给了我那个错误。 - user3543673

请确保在头文件中添加了jQuery，并在HTML加载完成后调用getNumbers()函数，可以通过控制台或按钮按下等方式进行。 - logikal

抱歉给您带来麻烦，但现在出现了一个错误：“ReferenceError: $未定义”。我是在Chrome控制台上运行的，如果这有关系的话。 - user3543673

"$ is not defined" 的意思是 jQuery 没有被包含，或者脚本在 jQuery 被包含之前运行。 - logikal