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

时间:2012-01-17 15:54:29

标签: php jquery

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

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

Here is the code (jsFiddle)

5 个答案:

答案 0 :(得分:6)

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

 Uncaught ReferenceError: $index is not defined

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

以下是经过修改的工作版本,其中包含以下更改:

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

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

  • jquery中的ID选择器是#<id> - &gt; "#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();
    });

});

答案 1 :(得分:1)

三件事 - 你在错误的地方得到了内部函数的结束},你应该使用.substring()来获取链接ID的最后两个字符,并且你正在使用一个css className选择器当你查找相应的元素时,而不是ID选择器。

http://jsfiddle.net/uvLfc/

也就是说,更好的方法是将ID的数字部分存储在链接的数据属性中,或者甚至可能存储目标DIV的实际ID,例如

<a href="#" class="show_hide" data-targetdiv="slidingDiv99"> +/-</a>
...
<div id="slidingDiv99">...</div>


<script>
$(".show_hide").click(function(){
    $('#' + $(this).attr('data-targetdiv')).slideToggle();
});
</script>

答案 2 :(得分:0)

其中一个选择器出错,我也修改了逻辑以获取slidingDiv的索引。

$(document).ready(function() {

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

    $(".show_hide").click(function(){
        var $str = $(this).attr("id");
        var $index = $str.replace('show_hide', '');


        var divName = "#slidingDiv" + $index;
        $(divName).slideToggle();

    });

});

正在使用 Demo

答案 3 :(得分:0)

您的代码中有一个类型o。将结束})放在click事件之外:

$(document).ready(function() {

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

    $(".show_hide").click(function(){
        var $str = $(this).attr("id");
        var $index = $str.charAt( $str.length-2 );

        var divName = ".slidingDiv" + $index;
        $(divName).slideToggle();

    });
});

答案 4 :(得分:-1)

您正在寻找方法on(),然后您可以使用该方法将事件处理程序绑定到动态生成的对象。这很容易合作。可以找到文档here