在jQuery上显示和隐藏具有动态ID的元素

我在Wordpress页面上有几个复选框，其id格式如下

id='more talktime-{{post.id}

其中动态设置

post.id

然后我有一个div元素，id为

id='talktimeoptions-{{post.id}}'

我尝试做的是，当单击复选框时，它将显示/隐藏相关的div元素。我试过这个：

jQuery( function ( $ ) {

   jQuery(document).ready(function(){
        jQuery('[id^=more-talktime-]').change(function(){
            var id = this.id.split('-').pop();
                if(this.checked)
                    jQuery('#talktime-options-' + id).fadeIn('slow');
                else
                    jQuery('#talktime-options-' + id).fadeOut('slow');
        });
    });
});

我确认

var id

是正确的。但是显示/隐藏不起作用，我在控制台上没有任何错误

默认情况下，div元素有一个

显示：none

编辑以添加一些HTML代码：

<div class="col-md-6 add-on-service">
    <h3>More Talktime</h3>
    <input type="checkbox" name="more-talktime" id="more-talktime-{{post.id}}" class="add-on-service-checkbox">
    <label for="more-talktime" class="add-on-service-description">blah blah blah</label>
</div>

<div class="add-on-service talktime-options hidden-box" id="talktime-options-{{post-id}}">
    <h3>Choose Talktime Duration</h3>
        ......
</div>

更多通话时间
废话废话
选择通话时长
......

固定的

---

我发现了问题。div元素有一个键入错误，正如您在HTML代码中看到的那样，它不是{{post.id}，而是{{post id}加了破折号。这样愚蠢的错误。但是，您的所有评论和回答都帮助我深入研究并找到了问题所在。

您的代码似乎工作正常，如下所示。如果在页面加载后将带有动态生成ID的复选框和div添加到DOM中，那么您可能希望将以下内容用于“更改”侦听器

jQuery（函数（$）{
jQuery（文档）.ready（函数（）{
jQuery（document）.on（'change'，'id^=more talktime-]'，function（）{
var id=this.id.split（'-'）.pop（）；
如果（选中此项）
jQuery（'#talktime options-'+id）.fadeIn（'slow'）；
其他的
jQuery（“#通话时间选项-”+id）.fadeOut（'slow'）；
});
});
});
。无显示{
显示：无；
}

检查1
第一组
支票2
第2部分
您必须更改

var id=this.id.split（'-'）.pop（）；to var id=$（this.attr（'id'）.split（'-'）.pop（）

使用.attr（）方法

也可以使用.fadeToggle（），确保元素的“显示”属性设置为“无”或“块”

在淡入淡出之间切换

$('#talktime-options-' + id).fadeToggle();
$('#talktime-options-' + id).fadeToggle("slow");
$('#talktime-options-' + id).fadeToggle(3000);


jQuery（函数（$）{
jQuery（文档）.ready（函数（）{
jQuery（'[id^=more talktime-]'）。更改（函数（）{
jQuery（'#talktime options-'+this.id.split（'-'）.pop（））.fadeToggle（'slow'）；
});
});
});
[id^=通话时间选项-]{
宽度：100px；
高度：100px；
保证金：5px；
边框：2个实心#ccc；
浮动：左；
显示：无；
}

支票1
支票2
支票3

第一组
第二组
div3
您也可以添加html吗？如果添加（在
之前，如果（选中此项）
）代码：
警报（jQuery（“#通话时间选项-”+id）.length）
是否动态添加了
#更多通话时间-
元素？或者它们是在第一次生成页面时添加的，而页面只是通过变量定义的id？（即，它们是在页面加载完成后添加的）请给出
{{post.id}
中的值的示例？如果您有任何特殊字符，例如
，
或空格，则会影响第二次查找。该死，该死，该死。。。我发现了问题。正如您在HTML代码上看到的那样，div元素有一个输入错误，它不是
{{post.id}}
而是
{{post id}}
加了一个破折号。这样愚蠢的错误。但你所有的评论和回答都帮助我在这方面做了更多的挖掘，并找到了问题所在。注意到，在未来会更好。谢谢你的反馈。不用担心，如果我也不想这么做，我很抱歉，这就是我删除之前评论的原因。在本文中，
这是一个DOM节点，而不是jquery对象。它必须是
$（this）.attr（“id”）…
。它们都提供了id属性，OP已经声明它们已经检查了var中的id是否正确。