无法使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小提琴

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

$(this).text()将获得带有jour类的div内的文本，并且您使用了错误的选择器。

Answer 2

.text()上的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();
    });
});