Question

我是Jquery的新手。我多次使用相同的功能时遇到问题。我正在尝试创建一个FAQ页面。第一个FAQ正常运行，但第二个没有。

<script> 
$(document).ready(function(){
   $("#flip").click(function(){
      $("#panel").slideToggle("slow");
   });
});
</script>

这是我调用函数的地方

<body>

<div id="flip">How do I delete FAQ's?</div>
<div id="panel">I don't know</div>

<div id="flip"><h1>Why doesn't this work?</h1></div>
<div id="panel"><p>I still don't know</p></div>

</body>

Answer 1

您可以使用“开头”选择器，如

$("[id^=flip]").click(function(){//your code here})

将函数绑定到id为以“flip”开头的所有元素。

Answer 2

因为ID必须是唯一的

使用类而不是与属性关联以指定必须显示哪个面板：

<div class="flip" target="panelA">How do I delete FAQ's?</div>
<div class="panel" id="panelA">I don't know</div>

<div class="flip" target="panelB"><h1>Why doesn't this work?</h1></div>
<div class="panel" id="panelB"><p>I still don't know</p></div>

<script> 
$(document).ready(function(){
   $(".flip").click(function(){
      $('#' + $(this).attr('target')).slideToggle("slow");
   });
});
</script>

第二次调用它时，Jquery函数无法正常工作

2 个答案: