if 语句的 JavaScript 循环

Question

我试图将包含许多 if 语句的函数缩短为循环函数，但似乎无法让它工作。目前它作为自定义 Javascript 宏在 Google 跟踪代码管理器中运行。

我不是开发人员，也不擅长 Javascript，因此我们将不胜感激。

代码:

  function()
  {
  if(document.getElementById('bfPage1').style.display !== "none")
     {return document.getElementById('bfPage1').getAttribute('id');
     }
  else
     if(document.getElementById('bfPage2').style.display !== "none")
        {return document.getElementById('bfPage2').getAttribute('id');
        }
     else
        if(document.getElementById('bfPage3').style.display !== "none")
           {return document.getElementById('bfPage3').getAttribute('id');
           }
        else
           {return document.getElementById('bfPage4').getAttribute('id')
           }
  }

提前致谢。

Answer 1

总之:

// with jQuery
var allPages = $('[id^=bfPage]')
var activeId = allPages.filter(':visible').attr('id')

// with ES6
const allPages = [].slice.apply(document.querySelectorAll('[id^=bfPage]'));
let activeId = allPages.find( e => e.style.display !== "none").id;

首先，您不需要使用 else 语句嵌套 if 语句，因为您在每个语句中都使用 return 语句。因此，在第一次重构之后，您将拥有:

function()
{
  if(document.getElementById('bfPage1').style.display !== "none")
   {return document.getElementById('bfPage1').getAttribute('id');
  }

  if(document.getElementById('bfPage2').style.display !== "none")
    {return document.getElementById('bfPage2').getAttribute('id');
    }

  if(document.getElementById('bfPage3').style.display !== "none")
       {return document.getElementById('bfPage3').getAttribute('id');
       }
  if(document.getElementById('bfPage4').style.display !== "none")
       {return document.getElementById('bfPage4').getAttribute('id')
       }
}

下一步是注意每次查询元素两次:

function()
{
  var page
  page = document.getElementById('bfPage1')
  if(page.style.display !== "none")
  {
    return page.getAttribute('id');
  }
  page = document.getElementById('bfPage2')
  if(page.style.display !== "none")
  {
    return page.getAttribute('id');
  }
  page = document.getElementById('bfPage3')
  if(page.style.display !== "none")
  {
    return page.getAttribute('id');
  }
  page = document.getElementById('bfPage4')
  if(page.style.display !== "none")
  {
    return page.getAttribute('id')
  }
}

现在您清楚地看到可以使用循环而不是重复语句

function()
{
  var pages = ['bfPage1','bfPage2','bfPage3','bfPage4']
  for (var i in pages) {
    page = document.getElementById(pages[i])
    if(page.style.display !== "none")
    {
      return page.getAttribute('id');
    }
  }
}    

哦，你已经知道id

function()
{
  var pages = ['bfPage1','bfPage2','bfPage3','bfPage4']
  for (var i in pages) {
    page = document.getElementById(pages[i])
    if(page.style.display !== "none")
    {
      return pages[i];
    }
  }
} 

这非常好。

您可以使用 jquery 并用它制作一行代码:

$('[id^=bgPage]:visible]').attr('id') 

这是一个很好的结果，但我们首先想一下为什么我们需要这样做？

您有一些逻辑来显示和隐藏页面元素，并且您想要检查哪个元素是可见的。

我们不再使用元素样式来做到这一点，而是做两件事。

• 为每个元素添加新类.bfPage

• 让我们将类 visible 或 active 添加到唯一可见元素

这样你获取id的代码将更改为:

$('.bfPage.active').attr('id')

在实际应用中将分为两部分:

一开始你就会有

var allPages = $('.bfPages')

以及您需要找到该元素的地方

var activeId =  allPages.filter('.active').attr('id')

当然，如果不是这种情况，您仍然可以通过缓存所有 bfPage 来提高性能

var allPages = $('[id^=bfPage]')

...

var activeId = allPages.filter(':visible').attr('id')