Question

我有一个按钮作为复制网址＆＃39;按钮。这在没有移动设备上工作正常，但我相信你在移动设备上不能依赖闪存这样的功能。在大多数移动网站上，用户必须手动复制URL。

所以，我想删除我的复制网址＆＃39;检测到移动设备后按钮。

在你烤我之前，是的，我已经读过：

我尝试了该线程中提到的解决方案，但它不起作用。知道为什么吗？这是我的代码：

<head>
<script>
     var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
     $('.test').css('display', 'none');
</script>

</head>
<div class= "test">yo test me</div>

非常感谢。

Answer 1

您似乎没有使用mobile变量做任何事情。但在你可以进一步发展之前，你必须解决阻止你的$('.test').css('display', 'none');隐藏div的问题：

执行脚本时，您引用的DOM元素不存在。该脚本应在创建DOM元素后执行，这可以通过以下几种方式完成：

将<script>标记移到HTML中的元素之后。这假设jQuery的链接在脚本之前的某个地方，而不是在。
使用jQuery的document.ready（）函数仅在DOM准备好后才执行JavaScript。由于您已经在使用jQuery，这通常是最方便的方法。

E.g：

<script>
    $(document).ready(function() {
        var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
        $('.test').css('display', 'none');
    });
</script>

Answer 2

您之所以看到这一点，是因为DOM未完全构建，因此当您尝试使用$('.test')访问它时，它无法获取它。你必须等到它完全准备好。

将您的Javascript代码包含在jQuery提供的就绪函数中：

$(document).ready(function () {
    // your code goes here
});

只有在加载了所有DOM后才会执行此代码。看看documentation。

Answer 3

一种简单的方法是在匹配某些情况时将类添加到html元素。

并使用选择器隐藏您希望仅在类存在时隐藏的元素

这使您可以隐藏元素，即使<body></body>天堂已被临时加载。

此外，它需要最少的DOM操作。因此，当需要隐藏太多元素时，它不会滞后于页面。

只需将代码放入<head></head>

即可

  <script>
    if (navigator.userAgent.search("Some thing") >= 0 ) {
      /*the html element*/
      var root = document.documentElement;
      root.setAttribute( "class", "hide-for-compitibility" );
    }
  </script>
  <style>
    html.hide-for-compitibility .selectors{
      display : none;
    }
  </style>

Answer 4

有没有人看他的代码？嘿伙计，

使用时没有包含Jquery。将其放在您的HTML部分<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
你把你的脚本放在错误的部分，把它移到JS部分。
您获得的mobile变量应该用在IF语句中。例如，

if (mobile) $('.test').css('display', 'none'); else $('.test').html('This ELSE leg should be removed');

最后，得到其他答案的意见，你应该将你的代码包装在$(document).ready()函数中。

这是一个例子，它确实有效。 http://codepen.io/anon/pen/QweBgq

另一种不使用Javascript的方法是使用CSS。在CSS部分中尝试以下代码。

.test { display: none; } @media (min-width: 768px) { .test{ width: 200px; height: 50px; background: red; display: block; } }

仅在移动设备上隐藏div

4 个答案: