JSLint 警告：`预期为 ':' 而看到的是 '='答案

【问题标题】：JSLint warning: `Expected ':' and instead saw '='JSLint 警告：`预期为 ':' 而看到的是 '='
【发布时间】：2018-04-15 17:00:35
【问题描述】：

当用户向下滚动页面时，我有一个转到顶部按钮。该按钮按预期工作，但在 JLint 中，它会发出警告：Expected ':' and instead saw '='. 如何更正代码：

var topBtn = document.createElement("button");
topBtn.innerHTML = "Top";

var topBtnWrapper = document.getElementById("topBtnWrap");
topBtnWrapper.appendChild(topBtn);

window.onscroll = function() {
  ((document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) ? topBtn.style.display = "block" : topBtn.style.display = "none");
};

【问题讨论】：

topBtn.style.display = (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) ? "block" : "none";
只检查document.documentElement.scrollTop 似乎就足够了.. 我也没有看到任何检查document.body.scrollTop 的理由

标签： javascript jslint

【解决方案1】：

问题出在这里：

((document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) ? topBtn.style.display = "block" : topBtn.style.display = "none");

这似乎是一个三元运算符，但三元是一种决定使用哪个值而不是运行哪个语句的方式。

这可以更好地表示为 if-else 块：

if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
    topBtn.style.display = 'block';
} else {
    topBtn.style.display = 'none';
}

如果您想继续使用三元运算符，它的外观如下：

topBtn.style.display = document.body.scrollTop > 500 || document.documentElement.scrollTop > 500
    ? 'block'
    : 'none';

【讨论】：

【解决方案2】：

我猜你的意思是：

topBtn.style.display = document.body.scrollTop > 500 || document.documentElement.scrollTop > 500
    ? "block" 
    : "none";

三元运算符并不意味着是一个流控制结构。

【讨论】：

【解决方案3】：

三元运算符的格式为：

x = condition ? option1 : option2

不是：

condition ? x = option1 : x = option2

您的代码应如下所示：

topBtn.style.display = 
    (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) 
        ? "block" 
        : "none";

【讨论】：