Switch questions using JavaScript and CSS I am writing a Q&amp;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;
}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head lang="en"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /&gt;
    &lt;meta name="apple-touch-fullscreen" content="yes" /&gt;
    &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
    &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
    &lt;meta name="format-detection" content="telephone=no" /&gt;

    &lt;link rel="stylesheet" href="../css/change.css"/&gt;
    &lt;script src="http://code.jquery.com/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="wrap"&gt;
    &lt;div id="parent"&gt;
        &lt;div class="children"&gt;NO.1&lt;/div&gt;&lt;div class="children"&gt;NO.2&lt;/div&gt;&lt;div class="children"&gt;NO.3&lt;/div&gt;&lt;div class="children"&gt;NO.4&lt;/div&gt;&lt;div&gt;result&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script src="../js/change.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;




Running example

I don't want to my last result div to switch, so there is no event listener on my last result div.
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.