Question

我用jQuery，html和css做了一个“划分切换器”。我在我的Wordpress网站上使用插件embedit pro来保存html代码，这样我就可以轻松地在Wordpress编辑器中粘贴一个短代码来显示HTML。

我制作了5次HTML代码，因为我希望有5个切换分区，现在的问题是，当我点击应该切换相关分区的5个按钮之一时，所有分区将打开而不是只有一个属于我刚刚点击的按钮的部门。

我知道为什么会这样，div有相同的名字。我可以解决这个问题，使每个单个转换器都是唯一的，但是我必须加载jquery 5次，有没有办法加载jquery脚本一次，并且可以切换属于该按钮的单个div？

我的jQuery代码：

<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/…; </script> 

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

和html：

<div class="flip">Klik hier voor meer informatie.</div> 
<div class="blueline"></div>
 <div class="panel">Hier komt de informatie te staan over de hosting van Onderdelenhuishetanker.</div>

问候，

托马斯。

Answer 1

您应该在flip div中添加面板类，以便您可以选择它的孩子。

HTML：

<div class="flip">Klik hier voor meer informatie. 
  <div class="blueline"></div>
  <div class="panel">Hier komt de informatie te staan over de hosting van Onderdelenhuishetanker.</div>
</div>

jQuery的：

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

演示：JSFiddle

Answer 2

是的，有办法。你可能忘了使用selector $（this）。

$("div.class").click(function () {

  $(this).toggle();
});

工作示例http://jsfiddle.net/qGeHe/

Answer 3

您的网站中永远不需要5个HTML或jQuery脚本。每个HTML文件用于不同的页面，您可以复制div的5次。

jQuery有选择正确div的选择器，id用于单选，class用于多选。

执行click()功能后，您不想再次选择所有div，而只需选择您点击的div。您只需使用$(this)。

即可

您的代码如下：

$("div.YOUR_CLASSNAME").click(function() {
   $(this).toggle();
});

将YOUR_CLASSNAME更改为div类的名称。

1个javascript更多元素

3 个答案: