Jquery/Javascript ( Convert from ID to Class )

Question

I did this script. But now i need to convert these id to classes because should I put it in other elements of the page.

card ---> .card

flip ---> .flip

 var init = function() {
      var card = document.getElementById('card');
      
      document.getElementById('flip').addEventListener( 'click', function(){
        card.toggleClassName('flipped');
      }, false);
    };
    
    window.addEventListener('DOMContentLoaded', init, false);

Can you help me?

SOLUTION :

$(function() {
  var card = $('.card');
  
  $('.flip').on( "click", function(){
    card.toggleClass('flipped');
    return false;
  });
});

Have you defined the toggleClassName function anywhere? It's not standard. Also, it would be better to actually amend the HTML source directly to achieve this. — Rory McCrossan
– Rory McCrossan, Commented Dec 11, 2015 at 14:20
@RoryMcCrossan #card.flipped { -webkit-transform: rotateY(180deg); } — Master-Antonio
– Master-Antonio, Commented Dec 11, 2015 at 14:39

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-11 14:53:56Z

2

Since you have tagged with jquery, I would give this:

// Once document is loaded,
$(function () {
  // Change all the `#card`, `#flip` to classes:
  $("#card, #flip").addClass(function () { return this.id; }).removeAttr("id");
});

First it selects all the #card and #flip, there should be only 2 elements. It adds their respective id as class and removes the id attribute.

Snippet

// Once document is loaded,
$(function () {
  // Change all the `#card`, `#flip` to classes:
  $("#card, #flip").addClass(function () { return this.id; }).removeAttr("id");
});

.card {background: #f99;}
.flip {background: #9f9;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="card">Card</div>
<div id="flip">Flip</div>

If you just wanna add the extra classes, then you can use this:

$(function() {
  var card = $('.card');

  $('.flip').on( "click", function(){
    card.toggleClass('flipped');
    return false;
  });
});

edited Dec 11, 2015 at 14:53

answered Dec 11, 2015 at 14:21

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Master-Antonio Over a year ago

Dont work. This is effect of my code. gyazo.com/dcd3eac86eb840c6a12ef77683fd9621

Praveen Kumar Purushothaman Over a year ago

@Master-Antonio Show your code! Not some image. Did you see my code in the answer?

Praveen Kumar Purushothaman Over a year ago

@Master-Antonio Yes, if you wanna add and remove class, you can use jQuery's toggleClass, but your question was converting the ID to class right?

Praveen Kumar Purushothaman Over a year ago

@Master-Antonio What does this mean? #card ---> .card, #flip ---> .flip?

Master-Antonio Over a year ago

That id "card" and "flip" becomes classes. Sorry for my english.

|

Collectives™ on Stack Overflow

Jquery/Javascript ( Convert from ID to Class )

card ---> .card

flip ---> .flip

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

card ---> .card

flip ---> .flip

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related