Question

我希望在浏览器大小低于768px时将标题标记添加到我的网页，并在高于768px时将其删除，无论我在两种尺寸之间切换多少次。我创建了下面的代码，如果我使用大小调整窗口它可以正常工作，但如果我手动调整大小，它会不断触发，导致多个标题标记。

如果它低于768px且高于768px一次，我想要它只做一次。

起初我没有把我的代码放在resize函数中，但是它只会工作一次，所以如果我增加它大约768px，标题标签就会消失但是如果我再次减小了大小，那么标题就没有了＃39;重新申请。

$(document).ready(function (){
    $(window).on('resize', function(){
        var width = $(window).width();
        if (width < 768) {
            insertHeader();
        }
        if(width > 767) {
            removeHeader();
        }
    });
});

//Function to add header
function insertHeader() {
    var headerTag = $("body").prepend(
                    "<header class='container container-style'> \
                        <div class='row'> \
                            <div class='col-xs-12'> \
                                <a href='#'><img class='img-responsive'  \
                                    src='img/dreamstime_s_52258696.jpg' alt='cartoon drawing of 1965 GTO'></a> \
                            </div>  \
                        </div> \
                    </header>");
    return headerTag
}

function removeHeader() {
    var headerTag = $("header").remove();
    return headerTag;   
}

Answer 1

您可以使用css媒体查询

@media (max-width: 768px) {
  .container {
    display: none;
  }
}

plnkr http://plnkr.co/edit/BsL71H91RVFgG3gUDexa?p=preview

Answer 2

你只想去辩论这个事件，有很多方法可以做到这一点，但在这种情况下，一个简单的旗帜就足够了

$(window).data('flag', $(window).width() < 768).on('resize', function() {
    var width = $(window).width();
    var flag  = $(this).data('flag');

    if (width < 768 && flag) {
        insertHeader();
        $(this).data('flag', false);

    } else if (width > 768 && !flag) {
        removeHeader();
        $(this).data('flag', true);

    }
});

FIDDLE

Answer 3

检查标题是否在DOM中

procedure tform1.button1click(Sender : TObject);
begin
chromium1.options.ImageLoading = STATE_ENABLED;
chromium1.load('www.test1.com');
end;

procedure tform1.button2click(Sender: TObject);
begin
chromium1.options.ImageLoading = STATE_DISABLED;
chromium1.load('www.test2.com');
end;

您的代码应该是

if($('header').length < 1){

}

DEMO HERE

仅在宽度之前加一次，在宽度之上加一次

3 个答案: