Question

如果屏幕尺寸为registerfighter_save，我想停用以下JavaScript：

def registerfighter_save(request, event_id):
    if request.method == 'POST':
        w = request.POST.get("w", "")
        w = request.POST.get("f", "")
        reg = Registration(
            event=event_id,
            fighter=f,
            weight=w,
            owner=request.user)
        reg.save()
    return HttpResponseRedirect(reverse('events:events'))

我发现以下页面看起来很合理，但我无法解决问题：

Disable jquery function when screen width larger than 480

Answer 1

如果您想要检测浏览器视口：

if($( window ).width() > 601){
    // function
}

如果您想检测HTML文档的宽度：

if($( document ).width() > 601){
    // function
}

根据您对其他答案的评论，您可以像这样添加静态图片：

$(function() {
    function rotate() {
        $('#homemaincontent div').last().fadeOut(2000, function() {
            $(this).insertBefore($('#homemaincontent div').first()).show();
        });
    }

    setInterval(function() {
        if($( window ).width() > 601){
            rotate();
        } else {
            var staticIMG =  document.getElementById('staticIMG');
            if (typeof(staticIMG) != 'undefined' && staticIMG != null){
                return false;
            } else {
                $("<img id='staticIMG' src='your/static/image.png'>").insertBefore($('#homemaincontent div').first()).show();
            }
        }
    }, 7000);
});

Answer 2

包含以下jQuery插件：

/*! viewportSize | Author: Tyson Matanich, 2013 | License: MIT */
(function(n){n.viewportSize={},n.viewportSize.getHeight=function(){return t("Height")},n.viewportSize.getWidth=function(){return t("Width")};var t=function(t){var f,o=t.toLowerCase(),e=n.document,i=e.documentElement,r,u;return n["inner"+t]===undefined?f=i["client"+t]:n["inner"+t]!=i["client"+t]?(r=e.createElement("body"),r.id="vpw-test-b",r.style.cssText="overflow:scroll",u=e.createElement("div"),u.id="vpw-test-d",u.style.cssText="position:absolute;top:-1000px",u.innerHTML="<style>@media("+o+":"+i["client"+t]+"px){body#vpw-test-b div#vpw-test-d{"+o+":7px!important}}<\/style>",r.appendChild(u),i.insertBefore(r,e.head),f=u["offset"+t]==7?i["client"+t]:n["inner"+t],i.removeChild(r)):f=n["inner"+t],f}})(this);

并像这样使用它：

if (viewportSize.getWidth() > 600) {
//your function goes here
}

Answer 3

$(function() {
  function rotate() {
    $('#homemaincontent div').last().fadeOut(2000, function() {
      $(this).insertBefore($('#homemaincontent div').first()).show();
    });
   }
     setInterval(function() {
         if(Math.max(document.documentElement.clientWidth, window.innerWidth || 0) > 601)
             rotate();
     }, 7000);
    });

所以现在每次调用rotate时，它将首先检查视口宽度是否大于601，如果是，它将执行该函数。

如果您不想调整响应行为，可以将该if语句放在$(function(){ insert if () run rest of code else do nothing}的开头运行，它只会在您的脚本第一次运行时评估一次

修改在评论中回答你的第二个问题

创建staticImageX css类和DynamicImageX类这将具有所需的css，如位置，宽度，顶部等。使用jquery和上面的表达式再次测试宽度并运行jquery代码来调整与旋转函数相同的intervan上的图像容器上的类所以

if(width > 601) $('#imageContainer').addClass('DynamicImageX').removeClass('staticImageX') else $('#imageContainer').addClass('staticImageX').removeClass('DynamicImageX')**

根据屏幕大小禁用jQuery

3 个答案: