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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -