点击事件仅触发第一个元素？

Question

我正在为我的Wordpress项目工作,我创建了一些jQuery代码,但它似乎只适用于第一个元素.

这是我的CSS:

<style type="text/css">
    #hide {
        display:none;
    }
</style>

这是我的jQuery:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#show").click(function(){
            $("#hide").toggle();
            return false;
        });
    });
</script>

我究竟做错了什么？

Answer 1

您可能有多个具有相同名称的ID(#show和#hide) - 将所有这些元素更改为使用类(ID应该是唯一的),然后您可以将代码更改为以下内容:

$(document).ready(function(){
    $(".show").click(function(){
        $(this).toggleClass('hide');
        return false;
    });
});

并略微改变你的CSS:

.hide {
  display:none;
}