attr change on resize не обновляется

Question

Я хочу изменить ширину данных attr зависит от (window) .width();

вот пример Codepen example

кусок кода

if ((screen_wd >= 0) && (screen_wd <= 460)) { 
     $(".fb-like-box").attr({ 
      "data-width": "440px" 
     }); 

    } 
    else if((screen_wd > 460) && (screen_wd <= 720)){ 

     $(".fb-like-box").attr({ 
      "data-width": "700px" 
     }); 
    } 
    else{ 

     $(".fb-like-box").attr({ 
      "data-width": "980px" 
     }); 
    } 

Отдых в примере

Когда и будет изменять ширину окна на, например 400 и «F5» перезагрузить это работает, но это не изменится на изменение в реальном времени.

Спасибо за помощь :)

Answer 1

Попробуйте

$(window).resize(function(){ 
    var screen_wd = $(window).width(); 
    if ((screen_wd >= 0) && (screen_wd <= 460)) { 
      $(".fb-like-box").attr({ 
       "data-width": "440px" 
      }); 

     } 
     else if((screen_wd > 460) && (screen_wd <= 720)){ 

      $(".fb-like-box").attr({ 
       "data-width": "700px" 
      }); 
     } 
     else{ 

      $(".fb-like-box").attr({ 
       "data-width": "980px" 
      }); 
     } 
}); 

Но это изменило бы только атрибут 'данных ширины'. Для того, чтобы изменить реальную ширину вам нужно использовать .width()

Попробуйте это:

$(".fb-like-box").width(440); 

Answer 2

Обычно в атрибутах данных JQuery HTML доступны как это:

$(".fb-like-box").data("width", "700px");