Question

我试图设置一个非常“香草”的方法，但无法得到结果。

我正在尝试使用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。我不明白为什么要用＆amp;＆amp;。

初始化它们

替换：

(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') {...

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

我看了第三眼，看到allCardCSS也错了，应该是：

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

结果将是所有div的NodeList，它们是另一个div（singleCardCSS和manyCardCSS的子节点。此NodeList是一个类似数组的对象，您可以对其进行简单的迭代，以便访问其中的对象。注意for循环如何通过NodeList allCardCss。

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

相同

最后一件事，我几乎忘记了括号业务：

以下两种模式中的任何一种都可用于立即调用函数表达式，利用函数的执行上下文创造“隐私”。

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

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

- Ben Alman

所以你没事。关键是如果你在结尾有一组额外的括号，那么浏览器会将其解释为 E xpression F ，这会导致我修复我 nvocation *。提及隐私是指具有闭包的IIFE，在您的情况下不适用，除非您将代码的后半部分变为函数，在这种情况下您有一个闭包。在你的情况下，它不需要，因为你没有从函数外部传递任何变量。

对那些知识渊博的人。如果有任何相反或遗漏的说法，请在您的downvote中留言。

*它的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>

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

2 个答案:

演示