调整大小时的attr更改不会更新

Question

我想更改数据宽度attr取决于（窗口）.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"
            });
        }
});

但这只会改变属性'data-width'。要更改实际宽度，您需要使用.width()

试试这个：

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

Answer 2

通常在jQuery HTML中，数据属性的访问方式如下：

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