クリックした単語の数をカウントする

Question

テキストを読んだり、読み終えた単語をクリックしたりできるページを作ろうとしています。コードは、読み込まれた単語の数を数えることができます。

私は一例に

を作った - 「いくつかの」私は言葉に達していると言うと、これまでのところ、私は最善の方法は次のようになり考え出し言葉

の量をカウントしたいです各要素の周りにスパンタグを作成し、そこからそれを把握する必要があります。しかし、私は今のところこだわっています。何か案が？

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()機能を試してみてください動的にインデックスを取得.Then要素を追加するためにon()でクリックイベントを.Add。 +1ゼロから=>インデックスstartので、あなたは、現在の要素までの総単語を取得するためにindex()を使用することができます位置

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

ため+1を追加します。以下のコードは次のとおりです。私はすでに、インデックスを持っているとして、あなたは要素を作成するときにonclickハンドラを追加する別のアプローチを行ってきた

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

。

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>