不能使jQuery动态选择器工作

Can't make jQuery dynamic selector work

本文关键字：选择器 工作 动态 jQuery 不能      更新时间：2023-09-26

我在什么似乎是一个简单的脚本工作，使按钮切换div进出视图。我以前也这样做过，但这次我在jQuery中使用动态选择器，看不出哪里出了问题。

如果我调用一个静态的(例如:'# list_21 ')，它就像一个魅力，但由于项目的数量现在不是提前，我宁愿得到动态版本的工作。

你知道怎么了吗?

Javascript

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


<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/

JS Fiddle

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

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

jQuery docs on .text()说

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

你可以简单地去掉空格:

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

你需要修剪你的值

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

JS: 

$(document).ready(function() {
    $(".jour").click(function() {
        var jour = $(this).text();
        $('#liste_'+$.trim(jour)).slideToggle();
    });
});
相关文章：