如何在jquery函数中使用类而不是ID

epignosis567 • 4 年前 • 534 次点击

我已经读完了类似的问题,但找不到答案。我有以下jquery代码 sliding panel . 我想用 classes 而不是 id ,但似乎没有任何效果:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
<style> 
#flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel {
  padding: 50px;
  display: none;
}
</style>


<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/52273

534 次点击

文章 [ 2 ] | 最新文章 4 年前

• 1 楼

Shree 4 年前

使用 next 带班级到 slideToggle 你的div如下。

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

.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

.panel {
  padding: 50px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="flip">Click to slide the panel down or up</div>
  <div class="panel">Hello world!</div>
  <div class="flip">Click to slide the panel down or up</div>
  <div class="panel">Hello world!</div>
</body>

使用 下一个 具有 this 与多pal div一起使用。Catching类用于切换多pal div的代码。

• 2 楼

Devsi Odedra 4 年前

第一个添加类 attribute 在里面 html 类似元素 class="flip"

现在你可以使用 class 在里面 jquery公司 使用点( . )所以你必须用 $(".flip")

你也可以给 css 具有 班 以同样的方式

见下面的答案。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style> 
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

.panel {
  padding: 50px;
  display: none;
}
</style>


<body>
<div id="flip" class="flip">Click to slide the panel down or up</div>
<div id="panel" class="panel">Hello world!</div>
</body>

登录后回复