gpt4 book ai didi

javascript - jquery 选择器的问题

转载 作者:行者123 更新时间:2023-11-30 13:40:48 25 4
gpt4 key购买 nike

抱歉,我正在尝试向表格内的图像添加一个事件,所以当它被点击时,它会折叠所需的 div。

我在这里面临着几个问题。

  1. 所有表格和 div 使用相同的类。
  2. 可能至少有两个表格和 div。
  3. 第一个表格不能点击,只能点击它的图片(用于显示和隐藏下面的 div)
  4. 其余的表格应该可以点击整个表格以显示和隐藏带有滑动切换的div。
  5. 其余表格也有两个图像,用于显示 slideDown 和 slideUp。

我拥有的功能有效但不完全。

再一次。

谢谢。

到目前为止,这就是我所拥有的。

<script type="text/javascript">
$(document).ready(function(){

$(".heading:not(#Container1)").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});


});

$(document).ready(function(){
$("img[alt='min']").click(function(){
var c = $(this).next(".container");
c.slideUp("slow");
});

$("img[alt='max']").click(function(){
var c = $(this).next(".container");
c.slideDown("slow");

});
});
</script>

<html>
<head></head>
<body>
<table class="heading" id="container1">
<tr>
<td>heading1</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container1</div>
<table class="heading">
<tr>
<td>heading2</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container2</div>
<table class="heading">
<tr>
<td>heading3</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container3</div>
</body>
</html>

最佳答案

试试这个脚本:

$(function(){
$(".heading:not(#Container1)").click(function(){
$(this).next(".container").slideToggle("slow");
});
$("img[alt='min']").click(function(e){
$(this).closest("table").next(".container").slideUp("slow");
e.stopPropagation();
return false;
});
$("img[alt='max']").click(function(e){
$(this).closest("table").next(".container").slideDown("slow");
e.stopPropagation();
return false;
});
});

SLaks 也取得了很好的成绩,你的脚本应该在这里:

<html>
<head>
//Script tags here
</head>

关于javascript - jquery 选择器的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2357153/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com