Change class on click

JavaScript performance comparison

Test case created by Raam

Info

SO question

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="dd">
  <ul>
    <li id="tab_login" class="login_unselected">Login</li>

    <li id="tab_register" class="register_selected">Register</li>
  </ul>
</div>

Preparation code output

  • Register

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
click
// Login Tab (default : first)
$(".login_unselected").click(function(){
 
  console.log('clicked login');
 
  // Show Login Tab as selected
  $(this)
    .removeClass('login_unselected')
    .addClass('login_selected');

  // Show Register Tab as unselected
  $(this).parent().find('#tab_register')
    .removeClass('register_selected')
    .addClass('register_unselected');
 
});
// Register Tab

$("#tab_register").click(function(){
 
  console.log('clicked register');
    var that = $(this);
    if(that.hasClass("register_unselected")){
  // Show Login Tab as selected
  that
    .removeClass('register_unselected')
    .addClass('register_selected');

  // Show Register Tab as unselected
  that.parent().find('#tab_login')
    .removeClass('login_selected')  
    .addClass('login_unselected');
    }
});
pending…
on
// Login Tab (default : first)
$(document).on('click', ".login_unselected", function(){
 
  console.log('clicked login');
 
  // Show Login Tab as selected
  $(this)
    .removeClass('login_unselected')
    .addClass('login_selected');

  // Show Register Tab as unselected
  $(this).parent().find('#tab_register')
    .removeClass('register_selected')
    .addClass('register_unselected');
 
});

// Register Tab
$(document).on('click', ".register_unselected", function(){
 
  console.log('clicked register');

  // Show Login Tab as selected
  $(this)
    .removeClass('register_unselected')
    .addClass('register_selected');

  // Show Register Tab as unselected
  $(this).parent().find('#tab_login')
    .removeClass('login_selected')  
    .addClass('login_unselected');
 
});
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment