JavaScript-当窗口低于750px时添加一个类；

Question

我正在使用引导程序3，并希望通过将btn-sm类添加到锚点的类列表中来使按钮下拉至btn-sm。

这是我正在尝试的。

(function ($) {
    var $window = $(window),
        $btn = $('btn');

    function resize() {
        if ($window.width() < 750) {
            return $btn.addClass('btn-sm');
        }

        $btn.removeClass('btn-sm');
    }

    $window.resize(resize)
        .trigger('resize');
})(jQuery);

到目前为止，它失败了。

Answer 1

第三行btn必须是类$btn = $('.btn');

Answer 2

只需使用CSS媒体查询，然后让浏览器完成以下工作即可：

@media screen and (max-width: 749px) {
    .btn {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
}

Answer 3

首先添加类，然后使用return

(function ($) {
    var $window = $(window),
    $btn = $('btn');

    function resize() {
        if ($window.width() < 750) {
            $btn.addClass('btn-sm');
            return;
        }

        $btn.removeClass('btn-sm');
    }

    $window.resize(resize)
    .trigger('resize');
})(jQuery);

Answer 4

您需要像这样“选择”：

$(window).resize(function() {
    if($(window).width() < 750) {
        $(".btn").addClass("btn-sm");
    } else if($(window).width() > 750) {
        $(".btn").removeClass("btn-sm");
    }
});

演示： http : //jsfiddle.net/cTh57/