Question

当移动设备处于横向模式时，我尝试追加div。但是我只想让div一次只追加一次。

function doStuff() {
  landscape = window.orientation ? window.orientation == 'landscape' : true;

  if (landscape && window.innerWidth < 736 && window.innerWidth > 320) {
    if (window.innerHeight > window.innerWidth) {
      console.log("portrait");
    } else {
      $("body").append("<div>Test</div>");
    }
  }
}

window.onload = window.onresize = doStuff;
if (window.onorientationchange) {
  window.onorientationchange = doStuff;
}

Answer 1

这里不需要JS代码 - 您可以单独使用CSS来实现这一目标。媒体查询具有orientation限制，您可以使用该限制来显示所需内容：

.landscape-only { display: none; }

@media all and (orientation:landscape) {
  .landscape-only { display: block; }
}

Working example

要查看内容更改，您只需要调整上述小提琴中输出框的宽度。

Answer 2

您可以检查是否已附加此div。

var appended = false;

function doStuff() {

    if(appended) return;

    landscape = window.orientation? window.orientation=='landscape' : true;

    if(landscape && window.innerWidth < 736 && window.innerWidth > 320){
        if(window.innerHeight > window.innerWidth){
            console.log("portrait");
        } else{
            $("body").append("<div>Test</div>");
            appended = true;
        }
    }

}

Answer 3

你可以使用一个只激活一次的（）

对于追加，您需要使用此

var $div = $('<div />').appendTo('body');
$div.attr('id', 'holdy');

Answer 4

如果已经附加div，则设置flag = true。

function doStuff(){
landscape = window.orientation? window.orientation=='landscape' : true;
var flag = false;
if(landscape && window.innerWidth < 736 && window.innerWidth > 320){
    if(window.innerHeight > window.innerWidth){
        console.log("portrait");
    }else{
       if (flag == false){
          $( "body" ).append( "<div>Test</div>" );
          flag = true;
       }else{
          console.log("Div is already appended");
       }

    }
  }
}

window.onload=window.onresize=doStuff;
if(window.onorientationchange){
  window.onorientationchange=doStuff;
}

Answer 5

我认为你可以使用.one（）。有关如何在互联网上使用它的例子。

http://api.jquery.com/one/

仅将<div>附加到正文中一次

5 个答案: