点击一下计算单词数量

Question

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

我做了一个例子

- 说我已达到'some'这个词，并且想要计算单词的数量

到目前为止，我认为最好的方法是在每个元素周围制作span标签，然后从那里弄清楚。但我现在有点卡住了。有什么想法吗？

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

Here is the fiddle, don't mind the styling

Answer 1

尝试使用index()功能。添加点击事件on()以动态追加元素。然后获取索引。+1 =＆gt; index从零开始，因此为位置

添加+1

＆＃13;

＆＃13;

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)
})

＆＃13;

span {
  border: 1px solid red;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用index()获取当前元素的总字数。以下是代码：

＆＃13;

＆＃13;

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

$(document).on('click', '.newclass', function() {
  console.log("Total words: " + ($(this).index() + 1))
});

＆＃13;

span {
  border: 1px solid red;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

当你创建元素时，我已经选择了另一种添加onclick处理程序的方法，因为你已经拥有了索引。

＆＃13;

＆＃13;

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

function howMany(i) {
  console.log(i + 1);
}

＆＃13;

span {
  border: 1px solid red;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;