Question

我使用了elevateZoom jquery插件。我想在移动设备中禁用elevateZoom（宽度小于600px的设备）。

那么，如何在下面的jquery中添加（如果条件）zoomEnabled: false,而不是zoomEnabled: true,。在移动设备上打开时。

<script>
$("#zoom_01").elevateZoom({
    gallery:'gallery_01',
    zoomEnabled: true,
    cursor: 'pointer',
    galleryActiveClass: 'active'
</script>

Answer 1

您可以使用jquery中的.width方法来确定窗口的宽度，并相应地更改对象属性。

你可以像这样使用它：

<script>
if ($( window ).width() < 600) {
  $("#zoom_01").elevateZoom({
  gallery:'gallery_01',
  zoomEnabled: false,
  cursor: 'pointer',
  galleryActiveClass: 'active'
} else {
  $("#zoom_01").elevateZoom({
    gallery:'gallery_01',
    zoomEnabled: true,
    cursor: 'pointer',
    galleryActiveClass: 'active'
}
</script>

Answer 2

更具可读性的方法（至少对我而言）：

<script>
    $("#zoom_01").elevateZoom({
        gallery:'gallery_01',
        zoomEnabled: ( $(window).width() >= 600 ),
        cursor: 'pointer',
        galleryActiveClass: 'active'
    });
</script>

但公平地说：阅读一个javascript教程或2，你可以自己想出来。

如何添加if条件

2 个答案: