当我点击按钮时,我尝试使用jquery动画制作带文本的div。没有任何事情发生,但Chrome的javascript控制台中没有出现任何错误。所以我不知道自己做错了什么。
$(function() {
$('#myb').click(function(event) {
alert("I'm hit");
$(this).parent('div.module').find('div.body').toggle(1);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
<div class="caption">
<span>Module Caption</span>
<!-- <img src="?" /> -->
<div class="pic"></div>
<button type="button" id="myb">show</button>
</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam eget enim id neque aliquet porttitor. Suspendisse
nisl enim, nonummy ac, nonummy ut, dignissim ac, justo.
Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum
sed neque vehicula rhoncus. Nam faucibus pharetra nisi.
Integer at metus. Suspendisse potenti. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Proin quis eros at metus pretium elementum.
</div>
</div>
&#13;
答案 0 :(得分:2)
.parent()
获取指定的所有子项的直接父项。在您的情况下,它会获得$("#myb")
的父级,即<div class="caption">
。
指定.parent("div.module")
相当于搜索<div class="caption">
div.module
。当然,没有找到结果,jQuery无声地失败,没有任何隐藏。
由于您真正想要的是div.module
,即div.caption
的父级,您应该执行以下操作:
$(this).parent().parent().find('div.body').toggle(1);
答案 1 :(得分:1)
使用closest('div.module')
代替parent()
parent()方法遍历其中每个的直接父级 DOM树中的元素并从中构造一个新的jQuery对象 匹配元素。
$(function() {
$('#myb').click(function(event) {
alert("I'm hit");
$(this).closest('div.module').find('div.body').toggle();
});
});
<强>段:强>
$(function() {
$('#myb').click(function(event) {
alert("I'm hit");
$(this).closest('div.module').find('div.body').toggle();
});
});
.module {
border: solid;
border-color: #FCAA45;
border-width: 10px;
margin: 15px;
width: 300px;
}
.body {
margin: 10px;
width: 100%;
}
.caption {
margin: 10px;
border-width: 10px;
width: 100%;
background-color: #AAAAFF;
}
.pic {
float: right;
height: 100px;
width: 50px;
border: solid;
border-color: #AAFFAA;
border-width: 10px;
background-color: #6A33FA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module">
<div class="caption">
<span>Module Caption</span>
<!-- <img src="?" /> -->
<div class="pic"></div>
<button type="button" id="myb">show</button>
</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam eget enim id neque aliquet porttitor. Suspendisse nisl enim, nonummy ac, nonummy ut, dignissim ac, justo. Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum sed neque vehicula rhoncus.
Nam faucibus pharetra nisi. Integer at metus. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quis eros at metus pretium elementum.
</div>
</div>
答案 2 :(得分:1)
尝试用.parents()
替换div.module:first
.parent()
$(function() {
$('#myb').click(function(event) {
alert("I'm hit");
$(this).parents("div.module:first").find("div.body").toggle(1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
<div class="caption">
<span>Module Caption</span>
<!-- <img src="?" /> -->
<div class="pic"></div>
<button type="button" id="myb">show</button>
</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam eget enim id neque aliquet porttitor. Suspendisse nisl enim, nonummy ac, nonummy ut, dignissim ac, justo. Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum sed neque vehicula rhoncus.
Nam faucibus pharetra nisi. Integer at metus. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quis eros at metus pretium elementum.
</div>
</div>
答案 3 :(得分:1)
您还可以使用.siblings():
$(this).parent('div.caption').siblings('div.body').toggle();