單擊單詞數量的計數

Question

我正在嘗試製作一個頁面，您可以在其中閱讀一些文本，並在完成閱讀時單擊所需的單詞。代碼應該能夠計算出讀取的字數。

我做出了榜樣

- 說我已經達到單詞「一些」，並希望來算的話

到目前爲止，我想出最好的辦法是量在每個元素周圍製作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()功能。新增click事件與on()用於動態追加元素。然後拿到指標。從零+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>

Answer 2

您可以使用index()得到總的話，直到目前的元素添加+1。下面是代碼：

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

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>

Answer 3

我已經走了，因爲當你創建元素，你已經索引然後加入onclick處理程序的不同的方法。

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

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>