javascript - "if (location.href != example.com/page1 || example.com/page2)"更改 CSS 元素

Question

当我使用这些类似的 JS 代码(下面的 2 个)时，我的输出是错误的或不显示。 这是我的问题代码:

if (location.href != "website.com/page1" || "website.com/page2")
   {
     element.style.backgroundColor='none';
   }

或使用 != 和 !==

if (location.href != "website.com/page1" || location.href != "website.com/page2")
   {
     element.style.backgroundColor='none';
   }

这是我如何将它与其他代码一起使用(简化)

<script>
var element = document.getElementbyId('idElement');

if (location.href != "website.com/page1")
   {
     element.style.backgroundColor='blue';
   }
if (location.href != "website.com/page2")
   {
     element.style.backgroundColor='green';
   }
 //HERE'S WHERE I PUT IT
if (location.href != "website.com/page1" || "website.com/page2")
   {
     element.style.backgroundColor='none';
   }
 </script>

要么没有任何反应，要么该元素在其他页面上无法正常工作。

我做错了什么？

更多信息:我正在制作一个 Tumblr 主题，当在不同页面上查看时，有些页面将具有具有不同特征的特定帖子。我必须将此代码放在顶部。

有人建议:已解决

<script>
     window.onload = function ()

 var element = document.getElementbyId('idElement');

 if (location.href != "website.com/page1" && location.href != "website.com/page2") 
    {
       element.style.backgroundColor='none'; 
    } 
  if (location.href == "website.com/page1") 
    {
       element.style.backgroundColor='blue'; 
    }
  if (location.href == "website.com/page2") 
        { 
       element.style.backgroundColor='green'; 
    }

</script> 

Answer 1

除了明显的语法错误(例如，您在 website.com/page2 之后遗漏了一个右引号)，您可能还需要做一些事情来缩小范围。

一方面，您可能只想获取一次 location.href 并将其存储在一个变量中。当你这样做的时候，你可以在上面使用 toLowerCase() ，这样你就可以确定你在比较苹果和苹果:

var currLoc = location.href.toLowerCase();

您的逻辑也有点有趣...首先您说，“如果我们不在第 1 页，请使用蓝色。如果我们不在第 2 页，请使用绿色。如果我们不在第 1 页或字符串是 page2，不使用颜色。”

所以，最后，没有颜色显示，因为如果您不在第 1 页或第 2 页，您说的最后一件事就是清除颜色？那部分不是很清楚，除了语法错误之外，可能是问题的一部分。请注意，在评估此行时:

if (location.href != "website.com/page1" || "website.com/page2)

你说的是“如果 location.href 不是 page1 或者如果 String("website.com/page2") 存在”

如果您在这两种情况下都测试 location.href，您需要:

if (location.href != "website.com/page1" && location.href != "website.com/page2")

我猜你想说什么。

所以，尝试将您的脚本更改为如下内容:

var element = document.getElementbyId('idElement');
var currLoc = location.href.toLowerCase();

// let's save this in a var, too, so you're only changing color once!
var toColor = "none"; 

if (currLoc != "website.com/page1") {
    toColor = 'blue';
}
if (currLoc != "website.com/page2") {
    toColor = 'green';
}
//HERE'S WHERE I PUT IT
if (currLoc != "website.com/page1" && currLoc != "website.com/page2") {
    toColor = 'none';
}

element.style.backgroundColor = toColor;