if语句的Javascript循环

我试图将包含许多if语句的函数缩短为一个循环函数，但似乎无法使其工作。它目前作为一个自定义Javascript宏在Google Tag Manager中工作

我不是一名开发人员，也不擅长Javascript，因此非常感谢您的帮助

代码：

---

提前感谢。

您可以创建一个包含所有元素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;
    }
}

var pageIds=['bfPage1'，'bfPage2'，'bfPage3'，'bfPage4']；
对于（var i=0；i这就是你想要做的吗

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

function（）{
对于（变量i=0；i<4；i++）{
var id=“bfPage”+i；
if（document.getElementById（id）.style.display！=“无”）{
返回id；
}
}
}
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
s，因为您正在每个语句中使用
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

允许将类
可见
或
活动
添加到唯一可见的元素


这样，获取id的代码将更改为：

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

在实际应用中，将分为两部分：

在一开始的某个地方，你会

var allPages = $('.bfPages')

在某个地方你需要找到那个元素

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

当然，如果不是这样，您仍然可以提高缓存所有
bfPage
s的性能

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

...

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

更适合codereview.stackexchange.com
var allPages = $('[id^=bfPage]')

...

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