立即调用页面默认值的函数表达式

Question

我试图为此设置一个非常 "vanilla" 的方法，但无法得到结果。

我正在尝试使用 JS 深入 DOM 和关联的 div 样式，并有效地更改 CSS 的 "display" 属性 .

JS 没有错误，但 CSS 没有改变。

(function() {
 var singleCard = document.getElementById('card-container');
 var manyCard = document.getElementById('card-container-many');
 var allCard = document.getElementById('card-container') && document.getElementById('card-container-many');

 var singleCardCss = document.querySelector('#card-container');
 var manyCardCss = document.querySelector('#card-container-many');
 var allCardCss = document.querySelector('#card-container') && document.querySelector('#card-container-many');

    if (singleCardCss.display && manyCardCss.display === 'none') {
        allCardCss.display = 'block';
    } else {
        allCardCss.display = 'none';
    }
}());

#card-container {
  position: relative;
  display: none;
  width: 280px;
  height: 310px;
  background-size: 640px 360px;
  background-repeat: no-repeat;
  border: 1px solid #222;
  border-radius: 10px;
  margin: 10px;
  cursor: pointer;
}
#card-container-many {
  position: relative;
  display: none;
  width: 280px;
  height: 310px;
  background-size: 640px 360px;
  background-repeat: no-repeat;
  border: 1px solid #222;
  border-radius: 10px;
  margin: 10px;
  cursor: pointer;
}

<div class="container-fluid text-center">
 <div id="card-container"></div>
</div>

<div class="container-fluid text-center">
 <div id="card-container-many"></div>
</div>

Answer 1

你的错误很常见。您必须删除函数后的最后一个 ) 。调用后关闭 IIFE。您可以尝试，但您的功能将永远不会被调用！您也可以尝试删除变量 allCardCss 和 allCard。我不明白你为什么用&&来初始化它们。

替换：

(function() {
    var singleCard = document.getElementById('card-container');
    var manyCard = document.getElementById('card-container-many');
    var allCard = document.getElementById('card-container') && document.getElementById('card-container-many');

    var singleCardCss = document.querySelector('#card-container');
    var manyCardCss = document.querySelector('#card-container-many');
    var allCardCss = document.querySelector('#card-container') && document.querySelector('#card-container-many');

    if (singleCardCss.display && manyCardCss.display === 'none') {
        singleCardCss.display = 'block';

    } else {
        allCardCss.display = 'none';
    }
}());

作者：

(function() {
    var singleCard = document.getElementById('card-container');
    var manyCard = document.getElementById('card-container-many');


    var singleCardCss = document.querySelector('#card-container');
    var manyCardCss = document.querySelector('#card-container-many');


    if (singleCardCss.display && manyCardCss.display === 'none') {
        singleCardCss.display = 'block';
        manyCardCss.display = 'block';
    } else {
        singleCardCss.display = 'none';
        manyCardCss.display = 'none';
    }
})();

Answer 2

缺少 .style 属性。例如：

 allCardCss.style.display = 'block';

此外，我认为 AND 运算符的使用是错误的。它应该在 if 条件下使用，如下所示：

if (singleCardCss.style.display === "none" && manyCardCss.style.display === 'none') {...

操作数的每一侧都必须在条件中完整，即使它是 2 个对象（singleCardCSS 和 manyCardCSS）与相同条件（"none"）之间的比较。

我看了三下，发现allCardCSS也不对，应该是：

var allCardCSS = document.querySelectorAll('div > div');

结果将是所有 div 的节点列表，它们是另一个 div（singleCardCSS 和 manyCardCSS）的子节点。这个 NodeList 是一个 array-like 对象，您可以对其进行简单的迭代以访问其中的对象。注意 for 循环如何遍历 NodeList allCardCss.

最后一条语句已被删除，因为不需要 else，因为它们已经 .style.display="none"。第一个语句也已被删除，因为 .getElementById('ID') 与 querySelector('#ID');

相同

最后一件事，我差点忘了括号业务：

Either of the following two patterns can be used to immediately invoke a function expression, utilizing the function's execution context to create "privacy."

(function(){ /* code */ }()); // Crockford recommends this one

(function(){ /* code */ })(); // But this one works just as well

-Ben Alman

所以你没事。关键是，如果你在末尾有一组额外的括号，那么浏览器会将其解释为 Expression Function这会导致I立即I调用*。提到 privacy 是指带有闭包的 IIFE，它不适用于您的情况，除非您将代码的后半部分变成一个函数，在这种情况下您有一个闭包。在您的情况下，不需要它，因为您没有从函数外部传递任何变量。

给知识渊博的人。如果有任何我所说的相反或遗漏的内容，请留下您的反对意见。

*IIFE 的句子顺序有点混乱，但你明白了

演示

(function() {
  var singleCardCss = document.querySelector('#card-container');
  var manyCardCss = document.querySelector('#card-container-many');
  var allCardCss = document.querySelectorAll('div > div');


  if (singleCardCss.style.display === "none" && manyCardCss.style.display === 'none') {
  
    for (let i = 0; i < allCardCSS.length; i++) {
      allCardCss[i].style.display = 'block';
    }
  }
}());

#card-container {
  position: relative;
  display: none;
  width: 280px;
  height: 310px;
  background-size: 640px 360px;
  background-repeat: no-repeat;
  border: 1px solid #222;
  border-radius: 10px;
  margin: 10px;
  cursor: pointer;
}

#card-container-many {
  position: relative;
  display: none;
  width: 280px;
  height: 310px;
  background-size: 640px 360px;
  background-repeat: no-repeat;
  border: 1px solid #222;
  border-radius: 10px;
  margin: 10px;
  cursor: pointer;
}

<div class="container-fluid text-center">
  <div id="card-container"></div>
</div>

<div class="container-fluid text-center">
  <div id="card-container-many"></div>
</div>

立即调用页面默认值的函数表达式

Immediately Invoked Function Expression For Page Defaults

javascript

css

dom

iife

演示