Question

我在3个单独的页面上使用灯箱作为一组图像。我刚刚使网站对移动设备做出了响应，但需要在移动设备上禁用灯箱。我认为最好的方法是删除较小屏幕的rel属性。

rel属性为：rel =“lightbox [page-name]”，它们位于无序列表中的锚点中，包含brandingsamples，marketingsamples和webdesignsamples类。

我不知道从哪里开始，所以任何帮助表示赞赏。

Answer 1

仅当您的页面未在移动环境中查看时，我宁愿执行灯箱脚本（并加载所有必要的资源），而不是删除属性。这样可以节省宝贵的带宽，让您的页面加载更快。

您可以使用像yepnope这样的轻型脚本/资源加载器，仅在满足给定条件时加载灯箱资源（例如，您可以查看屏幕分辨率或屏幕dpi值）

一个简单的例子可能是

<script src="/assets/yepnope.min.js"></script>
<script>
    yepnope([{
       test: (screen.width > 1024),  // if we're on a large screen
       yep: ["/css/lighbox.css", "/assets/lightbox.js"]
    }]);
</script>

Answer 2

只需删除一个属性即可尝试：

$('selecter').attr('attrname', 'valueifany');

在你的情况下，它将是：

$('body').attr('rel[lightbox]', '');

或者简单的一个：

$('body').removeAttr('rel[lightbox]');

要给出条件，您可以将屏幕宽度条件应用为：

if($(window).width() >= 'value' && $(window).height() >= 'value') {
  // write the code here..
}

http://api.jquery.com/removeattr/

Answer 3

检测移动设备，然后删除其中的属性。使用：

   if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   $('selector').removeAttr('rel');
   }

Answer 4

你可以尝试

<script type="text/javascript>
$(document).ready(function(){
  if(screen.width<600){
    $('a').removeAttr('rel[lightbox]');
  }
});
</script>

根据屏幕大小使用jquery删除rel属性？

4 个答案: