点击一下计算单词数量

Question

我正在尝试创建一个页面,您可以在其中阅读一些文本并单击您阅读完毕后所获得的单词.然后代码应该能够计算读取的单词数量.

我举了一个例子

- 说我已达到'某些'这个词,并想要计算单词的数量

到目前为止,我认为最好的方法是在每个元素周围制作span标签,然后从那里算出来.但我现在有点卡住了.任何的想法？

var words = $("p").text().split(" ");
$("p").empty();
$.each(words, function(i, v) {
    $("p").append($("<span class='newclass'>").text(v));
});

这是小提琴,不介意造型

Answer 1

尝试使用index()函数.使用on()动态追加元素添加click事件.然后获取索引.+1=>索引从零开始,因此添加+1位置

var words = $("p").text().split(" ");
$("p").empty();
$.each(words, function(i, v) {
  $("p").append($("<span class='newclass'>").text(v));
});

$('p .newclass').on('click',function(){
console.log($(this).index()+1)
})

span {
  border: 1px solid red;
}

span:hover {
  background-color: red;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a test bla bla bla some more words</p>