jquery select child by class, on child-click toggle the parents class -
i trying select element class
, , when clicked parent toggled.
html:
`
great-grandparent <div class='section' id='section-18'> grandparent <div class='docs'> parent <div class='octowrap'> * <a class='octothorpe' href='#section-18'>#</a>
`
$('octothorpe').closest('div.section').click(function() { $(".fold").toggle(500); console.log('fold', $('.fold').length); }); }); console.log("closest", $('.octothorpe').closest('div.section').length);
`
<style> .fold { display: none; } </style>
`
q1 answered <<neither work, how test class element being selected? there standard console log message can output? (i tried looking @ firefox inspector, couldnt tell if getting selected or not. how test straightforward way?(ie without change color, etc.. in log?) )>>
am chaining functions click , toggle correctly? child can clicked, (octothorpe href), parent .section needs toggle?
for code below:
console.log. (for test of parents) closest = 1 , never changes.
(for test of fold) fold increments each time clicked. toggleclass has no effect preventdefault(). style display:none
not work in situation?
`
$(function() { $(".octothorpe").click(function(e) { e.preventdefault(); var sector = $(this).closest("div.section"); sector.toggleclass(".fold"); //sector.(".fold").toggle(); console.log('fold', $('.fold').length); }); }); console.log("closest", $('.octothorpe').closest('div.section').length);
hi far. after fiddling ive figured cannot select great-grandparent, parent sibling , grandparent sibling. if select great-grandparent class element lost cannot bring back!
therefore, tried more selective code below. however, neither hide or slideup/down below appear anythin. console.log output shows fold class incrementing elements being selected.
whats wrong code?
`
$(function(){ $('.octothorpe').on({ click:function(e){ e.preventdefault(); var pfold =$(this).closest('.octowrap').siblings('p'); var cfold =$(this).closest('docs').siblings('.code'); $pfold=$(pfold); $cfold=$(cfold); //$pfold.hide(); //$cfold.hide(); if (!$pfold.hasclass("fold") && !$cfold.hasclass("fold")) { $cfold.slideup().addclass('fold'); $pfold.slideup().addclass('fold'); console.log('fold', $('.fold').length); } else { cfold.slidedown().removeclass('fold'); pfold.slidedown().removeclass('fold'); } } });
});
`
`
console.log($('.section').length);
will tell how many elements being selected. if want know if .fold
selector working, place
console.log($('.fold').length);
in click function.
Comments
Post a Comment