我需要重写的html在2 <p>
标签,当我选中一个复选框。注意:<div class="summary">
容器根据数据库的输出重复多次。
HTML**
<div class="summary">
<div>Data 1</div>
<div>Data 2</div>
<div class="col_5"><input type="checkbox" /></div>
</div>
<div class="details">
<p>label:</p><p>info</p>
<p>label 2:</p><p>more info</p>
<p class="jQuery1">another label to be changed:</p><p class="jQuery2">final info to be changed</p>
</div>
JavaScript(除了注解1和2之外,其他都可以工作)**
$(document).ready(function(){
$('input:checkbox').change(function(event) {
$(this).closest('div.col_5').html('Yes');
$('div.details').next('p.jQuery1').html('Changed 1'); // c1 -- this does not work
$('div.details').next('p.jQuery2').html('Changed 2'); // c2 -- this does not work
});
$('.summary').click(function(e){
if ($("input:checked").length == 0) {
$(this).next('.details').slideToggle('slow');
}
});
});
3条答案
按热度按时间vnzz0bqm1#
使用
find()
或children()
代替next()
:c2e8gylq2#
.next()
方法返回你调用它的元素的下一个兄弟,但是你试图找到你调用它的元素的子元素,所以你应该使用.children()
(只检索直接子元素)或.find()
(获取子元素,孙元素等)。尝试以下操作:
我保留对选中复选框的父div的引用(
$div
)的原因是因为您需要它来查找之后的div,并且在用字符串'Yes'覆盖div的html之后,您将无法使用this
,因为这会删除this
引用的元素。clj7thdc3#
使用find而不是next,因为你试图用类的详细信息查看div中的子元素
http://jsfiddle.net/HTaKV/2/
在第二个绑定中,你正在执行slideToggle,所以更改的内容被隐藏起来。所以我注解了那一行,以获得更改的可见性