title: Change img src with another img attribute on Responsive
body: <p>I created a attribute for img tag as in the example code like <code>data-tablet</code>, <code>data-mobil</code></p>
  
  <pre><code>&lt;div class="myDiv"&gt;
   &lt;img  src="img-1.jpg" data-tablet="img-2.jpg" data-mobil="img-3.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I want if my screen change for tablet my img src change with <code>data-tablet</code> or my screen is for mobil my src must change with <code>data-mobil</code></p>
  
  <p>MY JS</p>
  
  <pre><code>$(document).ready(function(){
  
      $(window).resize(function(){
        var tabletSrc = $(".main-carousel img").attr("data-tablet");
        var mobilSrc = $(".main-carousel img").attr("data-mobil");
        if($(window).width() &lt;=768){
  
           $('img').attr('src',tabletSrc);
        }
        if($(window).width() &lt;=480 ) {
           $('img').attr('src',mobilSrc);
        }
    });
  
  });
  </code></pre>
  
  <p><a href="http://codepen.io/cowardguy/pen/GNLvRW" rel="nofollow noreferrer">click to see my works</a></p>
  
  <p>question is how can I do that I want if u click you gonna see nothing work </p>
  
  <p>note: I don't want to use srcset or css</p>