if语句的Javascript循环

Question

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

我不是开发人员，也不擅长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

TLDR：

// 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')

Answer 2

您可以创建一个包含所有元素ID的数组，然后在其上循环并返回第一个可见元素的ID：

var pageIds = ['bfPage1', 'bfPage2', 'bfPage3', 'bfPage4'];
for(var i=0;i<pageIds.length;i++){
    var elemId = pageIds[i];
    if(document.getElementById(elemId).style.display !== 'none')
    {
        return elemId;
    }
}

Answer 3

这是您要做什么？

function(){
    for (var i = 0; i < 4; i++){
        var id = "bfPage" + i;
        if(document.getElementById(id).style.display !== "none"){
            return id;
        }
    }
}