patternjavascriptMinor

Switch questions using JavaScript and CSS

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

cssjavascriptquestionsusingandswitch

Problem

I am writing a Q&A wap page and want to switch questions in one page. This is my first time to write JS and CSS code, so I think there must be some improvement.

$(function(){
    $("#parent").on('click','.children', function(e){
        var that = e.currentTarget;
        var wid = parseInt($(that).parent().css('width'));
        var margin = parseInt($(that).parent().css('marginLeft'));
        margin -= wid;
        $(that).parent().css('marginLeft', margin + "px");
    });
});

#wrap {
  width: 100%;
  height: 30px;
  overflow: hidden;
}
#parent {
  width: 100%;
  -webkit-transition: all .2s linear;
  white-space: nowrap;
}
#parent div {
  background-color: gray;
  width: 100%;
  height: 30px;
  display: inline-block;
}



    
    
    
    
    
    
    

    
    

    
        NO.1NO.2NO.3NO.4result

Running example

I don't want to my last result div to switch, so there is no event listener on my last result div.

Solution

JavaScript

I would make the following changes in the jQuery code:

1) Create a private scope for your code using an IIFE.

2) Cache your selectors.

3) Supply the "radix" parameter to parseInt.

(function( $ ) { //start IIFE to create a private scope and $=jQuery

  function updateElement() {
    var $this = $(e.currentTarget),  //cache selectors
        $parent = $this.parent(),
        wid = 0, margin = 0;
    wid = parseInt( $parent.css('width'), 10); //added radix parameter
    margin = parseInt( $parent.css('marginLeft'), 10);
    $parent.css('marginLeft', (margin - wid) + "px");
  }

  $(function(){
    $("#parent").on( 'click', '.children', updateElement ); 
  });

})( jQuery );  //pass jQuery to function so $ is always set correctly.

If you are pointing to the #parent element you could change the JS to be more performant by caching the parent element as well.

(function( $ ) { 

  var $parent = $('#parent');

  function updateElement() {
    var wid = 0, margin = 0;
    wid = parseInt( $parent.css('width'), 10); //added radix parameter
    margin = parseInt( $parent.css('marginLeft'), 10);
    $parent.css('marginLeft', (margin - wid)+ "px");
  }

  $(function(){
    $parent.on( 'click', '.children', updateElement ); 
  });

 })(jQuery);

CSS

In your CSS you should remove the vendor prefixes or supply all of them ( Here is a list. Ok not all just the most common: ms,o,moz,webkit,etc ). Also, you should include the non-prefixed property last in the list so that once it is available non-prefixed your code still works.

#parent {
  -moz-transition: all .2s linear;
  -o-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}

You could also use a tool like autoprefixer in your build process to add the prefixes automatically. I would recommend this approach.

Code Snippets

(function( $ ) { //start IIFE to create a private scope and $=jQuery

  function updateElement() {
    var $this = $(e.currentTarget),  //cache selectors
        $parent = $this.parent(),
        wid = 0, margin = 0;
    wid = parseInt( $parent.css('width'), 10); //added radix parameter
    margin = parseInt( $parent.css('marginLeft'), 10);
    $parent.css('marginLeft', (margin - wid) + "px");
  }

  $(function(){
    $("#parent").on( 'click', '.children', updateElement ); 
  });

})( jQuery );  //pass jQuery to function so $ is always set correctly.

(function( $ ) { 

  var $parent = $('#parent');

  function updateElement() {
    var wid = 0, margin = 0;
    wid = parseInt( $parent.css('width'), 10); //added radix parameter
    margin = parseInt( $parent.css('marginLeft'), 10);
    $parent.css('marginLeft', (margin - wid)+ "px");
  }

  $(function(){
    $parent.on( 'click', '.children', updateElement ); 
  });


 })(jQuery);

#parent {
  -moz-transition: all .2s linear;
  -o-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}

Context

StackExchange Code Review Q#88196, answer score: 3

Revisions (0)

No revisions yet.