How do I use JavaScript and Nth-Last-Child to add and remove CSS classes? -
I'm not in any way javascript wizard, but I'm trying to remove a way to add JavaScript Remove the classes from a series of DIV based on the click of a button. Let's say I have a list:
& lt; Div id = "homepage" & gt; & Lt; div class = "hpFeature" & gt; & Lt; / Div & gt; & Lt; div class = "hpFeature" & gt; & Lt; / Div & gt; & Lt; div class = "hpFeature" & gt; & Lt; / Div & gt; & Lt; div class = "hpFeature" & gt; & Lt; / Div & gt; & Lt; div class = "hpFeature" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Button class = "feature button" & gt; Click here & lt; / Button & gt; For my progressive enhancement purposes, my default CSS is at least one image shown as a fallback:
.hpFeature: nth-child 1) {display: block;} .hpFeature {display: none;} Fade {status: complete; Left: -9999px;} ... and my JavaScript has so far something like this:
var count = $ ('.hpFeature') .length; $ (Document) .ready (function () {$ ('.hpFeature'). CSS ('display', 'block'); $ ('.hpFeature') AddClass ('fide'); $ ('.hpFeature : Nth-child ('+ count +') '). RemoveClass (' fide ');}); $ (Function () {$ (". Feature button") Click (function () {$ ('.hpFeature'). RemoveClass ('fide');});}); Therefore, I am trying to remove an easy way to do this with the nth-last-child property that shows the first image via javascript, and then scrolling again Button goes to the next one in this count, goes away, goes away, and finally goes back first (I can not even get nth-last-child to work, but to work nth-child Can get it).
If it were mine, then I would assign the array functionality to a native JavaScript array.
Then I can manipulate that array and read it as html.
Then we can create an array
var hpFeatureArray = [] Create a function to bind to html < / P>
function refresh () {var content = '' (var i = 0; i & lt; hpFeatureArray.length; I ++) content = content + '& lt; div class = "hpFeature" & gt; & Lt; / Div> $ ('#homepage'). html (content)} refresh.
hpFeatureArray.push ('whatever') refresher () Here is an example
Comments
Post a Comment