如何使用html ID和jQuery显示/隐藏动态元素

Question

我在这里问了一个类似的问题 ,我希望得到一个div来显示/隐藏而不是所有的div.这已经解决了,我使用了提供的答案之一.然而,在线下我遇到了一些问题,它会打开错误的相应div,并建议我使用ID来打开正确的相应div.div是与它们的ID一起动态生成的,它们按预期匹配.

我的问题是jQuery脚本不再起作用了(我已经使用上一个问题中其他答案的建议重写了它) - 有谁知道问题是什么？

这是代码(jsFiddle)

Answer 1

快速浏览一下javascript控制台(F12)会显示以下错误消息:

 Uncaught ReferenceError: $index is not defined

引发此错误的原因是您尝试使用$index定义范围之外的变量(在单击处理程序中).

这是一个工作修改版本,具有以下更改:

• 在事件处理程序中,using this.id足以获取元素的ID,因为this在事件处理程序中是DOMElement而不是jquery对象

• 使用.replace()或.substring()来获取id的最后两位数字..charAt()仅返回指定位置的1个字符

• jquery中的ID选择器是#<id>- >"#slidingDiv" + idx

• 只有jquery变量的前缀$,而不是常规变量.它只是一个约定,但当你看到$myvariable你然后期望它是一个jquery对象

DEMO

$(document).ready(function() {

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $(".show_hide").click(function() {
        var id = this.id;
        var idx = id.replace('show_hide', '');
        //var idx = id.substring(id.length-2);
        var divName = "#slidingDiv" + idx;
        $(divName).slideToggle();
    });

});