javascript - 调整大小时的 attr 更改不更新

Question

我想改变 data-width attr 取决于 (window).width();

这是示例Codepen 示例

一段代码

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

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

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

Answer 2

尝试这个

   $(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);