通过 css+javascript 添加/删除阴影答案

【问题标题】：add/remove shadow via css+javascript通过 css+javascript 添加/删除阴影
【发布时间】：2017-03-17 09:52:06
【问题描述】：

我有一个包含很多 Div 的页面，并且我正在使用 panzoom jquery 脚本。为了加快页面速度，如果页面缩小到指定值以上，我想禁用 div 上的阴影，如果页面放大则启用阴影。目前我有这个代码，即被称为每 0.5 秒：

function shadow()
{
var $panzoom = $('.panzoom').panzoom(); 

var matrix = $panzoom.panzoom("getMatrix");
$("#zoomf").html(matrix[0])

//if zoom is bigger than 0.35 enable shadows

if (matrix[0] > 0.35)
{
    var $elements = $('.machinebox').addClass('shadow');
    var $elements2 = $('.playerbox').addClass('shadow');
}
else
{
    $elements.removeClass('shadow');
    $elements2.removeClass('shadow');
}   
}

我面临的问题基本上有两个：

1) var $elements 始终不存在，它只在阴影存在时才存在。因此，如果我缩小，它会移除阴影，然后生成错误： SCRIPT5007：无法获取未定义或空引用的属性“removeClass” 德 (282,3)

2) 当它添加/移除阴影时，它会冻结大约一秒钟。能以某种方式避免这种情况吗？

【问题讨论】：

您误解了变量的工作原理。 var $elements 只能是一个，不能是两个。两次声明$elements 是错误的。 $elements.removeClass('shadow'); 两次将对同一个元素做同样的事情。
你可以这样做$('.machinebox, .playerbox').toggleClass("shadow", (matrix[0] > 0.35))
Xfox 谢谢，你是对的，那是一个错误，更新了代码。
@Titus 这就像一个魅力谢谢！现在可以做点什么来解决第 2 点吗？
我不确定是什么原因造成的，获取矩阵可能需要一些时间。你打电话给panzoom() 两次。我认为您可以直接使用var matrix = $('.panzoom').panzoom("getMatrix"); 获取矩阵

标签： javascript jquery css shadow

【解决方案1】：

第一个问题是因为变量$element和$element2只有在条件为true时才被声明和初始化。第二个原因似乎是因为有很多元素都有 machinebox 和 playerbox 类。

您可以使用以下方法修复它们：

function shadow() {
    var matrix = $('.panzoom').panzoom("getMatrix");
    $("#zoomf").html(matrix[0])
    $('.machinebox:visible, .playerbox:visible').toggleClass("shadow", (matrix[0] > 0.35))
}

【讨论】：

【解决方案2】：

对于第 2 点，因为您已经解决了第 1 点。
该函数每 0.5 秒运行一次，这可能就是您得到延迟的原因。
尝试暂停它，直到用户下次缩放（如果您使用的库允许您检测此类事件，idk）

【讨论】：

用户不断放大。计时器只是检查它现在的缩放级别.. 所以在放大时，它会锁定，添加阴影，然后继续缩放.. 锁定是导致问题的原因。
哦，我明白了，这里肯定有很多 div 正在被更改......