無法使jQuery動態選擇器工作

我正在研究什麼似乎是一個簡單的腳本，使按鈕切換div和進出視圖。我之前做過，但是這一次我在jQuery中使用動態選擇器，並且看不到有什麼問題。無法使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/#

來源

2016-11-09 Antoine Bergeron

'$（ this）.text（）'=>打印額外的空格嘗試「trim（）」它：'$（this）.text（）。trim（）' – four

這樣做。非常感謝！ –

JS Fiddle

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

$(this).text()將得到div中的文本與類jour和你使用了錯誤的選擇。

來源

2016-11-09 01:22:05

任何想法爲什麼跨度添加空格字符？修剪字符串的@four的建議也起作用，所以我想知道添加了什麼。 –

在每個'.jour' div中，您都有換行符和製表符，也可能在''元素的周圍有空格。在你的範圍內沒有任何內容，因此從中抓取更安全！ –

它不是跨度...'.text（）'實際上獲取了父元素的所有後代文本，包括行結束符和空白空間，直到元素的末尾。這就是爲什麼選擇'span'元素並獲取其文本值更安全的原因 – four

上.text() jQuery的文檔說

由於在不同瀏覽器的HTML解析器變化，返回的文本可能會在換行和其他空白變化。

你可以簡單地修剪出的空白：

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

來源

2016-11-09 01:26:20

您需要修剪怨婦值

小提琴手：https://jsfiddle.net/5yqsptry/3/

JS：

$(document).ready(function() { 

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

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

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

來源

2016-11-09 01:32:33

無法使jQuery動態選擇器工作

回答

相關問題