jQueryダイナミックセレクタの作業を行うことができません

Question

私は単純なスクリプトのように、ボタンのトグルdivを表示と非表示にしています。これまでに行ったことがありますが、今回はjQueryで動的セレクタを使用していて、何が間違っているのかわかりません。

私は静的なもの（つまり '＃liste_21'）を呼び出すと、それは魅力的に機能しますが、アイテムの数が前もってはないので、ダイナミックバージョンが機能するようにしたいと思います。

何が悪いと思いますか？

Javascriptを

$(document).ready(function() { 
     $(".jour").click(function() { 
      var jour = $(this).text(); 
      $('#liste_'+jour).slideToggle(); 
     }); 
    }); 

HTML

<div id="calendrierActivites"> 
    <div id="nov20" class="jour"> 
     <span>20</span> 
    </div> 
    <div id="nov21" class="jour"> 
     <span>21</span> 
    </div> 
    <div id="nov22" class="jour"> 
     <span>22</span> 
    </div> 
</div> 

<div id="liste_20"> 
    <h2>20 novembre</h2> 
</div> 
<div id="liste_21"> 
    <h2>21 novembre</h2> 
</div> 

<div id="liste_22"> 
    <h2>22 novembre</h2> 
</div> 

https://jsfiddle.net/5yqsptry/#

Answer 1

JS Fiddle

var jour = $(this).find('span').text(); 

$(this).text()は、jourのdivクラス内のテキストを取得し、間違ったセレクタを使用しています。 .text()上

Answer 2

jQueryのドキュメントが原因異なるブラウザでHTMLパーサの変化に

と言って、返されたテキストは、改行やその他のホワイトスペースを変えることができます。

あなたは、単に空白をトリムすることができます

var jour = $(this).text().trim(); 

Answer 3

あなたはジュール値に

シオマネキトリムする必要があります。https://jsfiddle.net/5yqsptry/3/

JS：

$(document).ready(function() { 

    $(".jour").click(function() { 

     var jour = $(this).text(); 

     $('#liste_'+$.trim(jour)).slideToggle(); 
    }); 
});