jquery - 如何在单个帖子中多次使用此代码?

标签 jquery css wordpress

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script> 
            $(document).ready(function(){
                $("#flip").click(function(){
                    $("#panel").slideToggle("slow");
                });
            });
        </script>

        <style type="text/css"> 
            #panel,#flip
            {
                padding:5px;
                text-align:center;
                background-color:#e5eecc;
                border:solid 1px #c3c3c3;
            }
            #panel
            {
                padding:50px;
                display:none;
            }
        </style>
    </head>
    <body>

        <div id="flip">Hide/show</div>
        <div id="panel">Hello world!</div>

    </body>
</html>

** 基本上我的博客是与测验相关的,我想显示 10 个答案,比如隐藏/显示方法,所以这段代码对此很有用,但如果我使用多个 div 使用这段代码,它会赢没用,所以我需要解决这个问题。谢谢。

最佳答案

使用类而不是 id,因为元素的 id 必须是唯一的

<div class="flip">Hide/show</div>
<div class="panel">Hello world!</div>

然后

$(document).ready(function () {
    $(".flip").click(function () {
        $(this).next('.panel').slideToggle("slow");
    });
});

演示:Fiddle

当您使用 id 选择器时,它将返回具有所述 id 的第一个元素。这意味着 $("#flip") 将仅返回具有 id flip 的第一个元素,因此点击处理程序将仅注册到第一个元素

关于jquery - 如何在单个帖子中多次使用此代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21058376/

相关文章:

javascript - 将多个选择器传递给一个函数

javascript - 为链接到文本的图像模式调整 JQuery 代码

html - 单击/聚焦时如何使 HTML 元素保持对齐?

html - 多个目录中图像的路径

php - Wordpress SQL 选择错误

javascript - 在点击时创建切换

javascript - 取消选中子项之一时取消选择所有复选框的问题

css - 与 FF 和 Chrome 相比,渲染字体不同于 IE

php - 长图像名称破坏 CSS div

javascript - 使用 javascript/jquery 加载文件