jQueryを使って内部のハイパーリンクをクリックすると、どのように李を隠すのですか？私は内部のリンクがクリックされたときのliリスト項目を非表示にしようとしている

Question

は

<ul> 
<li id="list_1" class="list"><a href="http://">hide</a> 
</li> 

<li id="list_2" class="list"><a href="http://">hide</a></li> 

<li id="list_3" class="list"><a href="http://">hide</a></li> 

<li id="list_4" class="list"><a href="http://">hide</a></li> 
</ul> 

<span class="updateNumber">0</span>​ 

で、毎回のli項目は隠され、これがすべき1感謝

Answer 1

によってupdateNumberテキストの数を増やします

$('li a').on('click', function(e) { 
    e.preventDefault(); 

    $(this).parent().hide(); 
}); 

セレクタli aが（それは貪欲になるだろうので、私はここに、単純な、それを守ってきた）任意の<li>内のすべての<a>タグを見つけた：トリックを行います。次に、$.on()を使用して、イベントハンドラをclickイベントにバインドします。

ここでは、匿名関数（名前のない関数）を使用して、ここでは引数として関数にeを渡します。 eにはイベントオブジェクトが含まれているので、次の行でe.preventDefault()を実行できます。この行は、ブラウザのデフォルトの動作を行います。これは、<a>タグのhref属性のURLに移動することです。

行$(this).parent().hide()が重要です。ここでは、$(this)がクリックされたリンクを参照しているので、$(this).parent() の親ノード（タグ）にアクセスできます。この場合、<li>です。最後に.hide()を追加すると<li>が表示されなくなります。

---

は、あなたの .updateNumberスパンを更新し、あなたのクリックハンドラ関数にこのコードを追加するには：

var currentNumber = parseInt($('.updateNumber').text()); 

currentNumber++; 

$('.updateNumber').text(currentNumber); 

最初の行は、あなたのスパン内のテキストから整数を取得し、currentNumberという変数に割り当てます。 parseInt()は、スパン内のものを整数に変換しようとします。

2行目のcurrentNumber++;は、スパンから取得した現在の値を受け取り、1だけインクリメントします（++）。

私たちは、新しい、更新された値とスパンに表示されるテキストを置換したいので、私たちは再び$.text()を使用することにより、バックスパンに新しい価値を置く：

$('.updateNumber').text(currentNumber); 

注意を通過せずに$.text()を使用していることそれは使用する文字列の要素のテキストを取得しますが、"Hello world, I'm a string"のような引数で$.text()を入力すると、その文字列をターゲット要素に入れます。

---

Hereは誇らしげにコメントから@Reigelによって生成され、後援作業のデモです。