jquery - How to successively change a class on click -


suppose have list of div:

<div id='d-1' class='hidden'>this one<br />     <button onclick='next();'>next</button> </div> <div id='d-2' class='show'>second 1 <br />     <button onclick='next();'>next</button> </div> <div id='d-2' class='hidden'>third one<br />     <button onclick='next();'>next</button> </div> <div id='d-2' class='hidden'>fouth 1 <br />     <button onclick='next();'>next</button> </div>

and css:

.show {   color: red; }  .hidden {   color: green; }

how can change classes successively？

i try by:

$(function(){  function next(){  $(this).removeclass('show').addclass('hidden');  } });

any help? here code injsfiddle:

edit

updated here

your question has several aspects try adress each 1 one. if use chrome dev tools can see console reports uncaught referenceerror: next not defined. of error move function next() outside of document ready. this

// not work $( document ).ready(function() {         function next(){          $(this).removeclass('show').addclass('hidden');     } });

becomes this

function next(){     $(this).removeclass('show').addclass('hidden'); }  $( document ).ready(function() {         // next moved outside    });

as can see not need document.ready anymore.

the next error can see on chrome dev-tools uncaught typeerror: object [object object] has no method 'removeclass'. reason method (as others have said) removeclass

chrome dev tools - console error message

changing error , 1 addclass added console.log('this', this); find out object this points

function next(){     console.log('this', this);     $(this).removeclass('show').addclass('hidden'); }

now can see in chrome dev tools this points object window. have reconsider how make sure next() points right object. pass id or in case jquery selector (# + id). 

<div id='d-1' class='isactive'>first one<br />     <button onclick="next('#d-1');">next</button> </div>

i changed class names based on understanding mean.

function next(jqselector){            $(jqselector).removeclass('isactive').addclass('ispassive'); }

demo first part

no works first <div id='d-1' .... take look @ demo 1. assume want more. depends on mean. should click on button d1

  • color d2 green , d1 red
  • or should d1 made green , next div (d2) red.

option 1 make current active (red) others passive (green)

in demo under second headline button click makes parent div active (red-color) others passive

<div id='d-1' class='mydivs isactive'>first one<br />     <button onclick="makeactive('#d-1');">make active</button> </div> <div id='d-2' class='mydivs ispassive'>second one<br />     <button onclick='makeactive();'>make active</button> </div>

and javascript

function makeactive(jqselector){      console.log('makeactive', jqselector, $(".mydivs"));     // set every element class .mydivs passive     $(".mydivs").removeclass('isactive').addclass('ispassive');       // set 1 element active        $(jqselector).removeclass('ispassive').addclass('isactive'); }

Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more