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()会在div内找到jour类的文字，而你使用错误的选择器。

Answer 2

<{3}}上的jQuery文档说

由于不同浏览器中HTML解析器的差异，返回的文本可能会在换行符和其他空格中有所不同。

你可以简单地修剪空白：

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

Answer 3

您需要修剪jour值

fiddler：https://jsfiddle.net/5yqsptry/3/

JS：

$(document).ready(function() {

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

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

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

无法使jQuery动态选择器工作

3 个答案: