javascript - 可重用的 CSS 编辑功能

Question

我已经为此寻找了解决方案。我无法使用 jQuery，也无法使用 JavaScript，但它必须是 JavaScript 语言。

我想使用一个函数来编辑我单击的 div 的子级。我还想重用该功能

这是标记:

function expdr() {
	if (this.style.display == "block") {
		this.style.display = "none";
	} else {
		this.style.display = "block";
	}
}

.bigMe    {display: block;}

<div id="whole">

	<div id="bleb" onclick="expdr()">
	  <h2>Headline Here!</h2>
	  <p>Paragraph here also. Isn't it a lovely day? Actually I'm asking because I'm stuck in an office.</p>
	  <div class="bigMe">
	    <p>This is a paragraph in a second comp class</p>
	  </div>
	</div>
	
	<div id="bloab" onclick="expdr()">
      <h2>Headline Here!</h2>
	  <p>Paragraph here also. Isn't it a lovely day? Actually I'm asking because I'm stuck in an office.</p>
	  <div class="bigMe"> <!-- Div ARRAY = 4 -->
	    <p>This is a paragraph in a second comp class</p>
	  </div>
	</div>

</div>

提前感谢您对我的宽容，再说一次，我在 JavaScript 方面遇到了困难。

Answer 1

尽量避免内联操作 - 这可能会导致问题，并且可能会变得相当困惑。最好一起做。

https://jsfiddle.net/22vjokv2/

让我们来看看这个 -

首先，我们将删除内联 JS 调用并向容器添加一个类 -

<div id="whole">
    <div id="bleb" class='article'>
         <h2>Headline Here!</h2>

        <p>Paragraph here also. Isn't it a lovely day? Actually I'm asking because I'm stuck in an office.</p>
        <div class="bigMe" id='bigMe1'>
            <p>This is a paragraph in a second comp class</p>
        </div>
    </div>
    <div id="bloab" class='article'>
         <h2>Headline Here!</h2>

        <p>Paragraph here also. Isn't it a lovely day? Actually I'm asking because I'm stuck in an office.</p>
        <div class="bigMe" id='bigMe2'>
            <!-- Div ARRAY=4 -->
            <p>This is a paragraph in a second comp class</p>
        </div>
    </div>
</div>

请注意，我还为每个 bigMe 提供了一个 ID，只是为了让事情更清楚地了解其工作原理。

我们需要做的下一件事是定义我们的元素并附加一些监听器，这本质上是您的 onclick 正在做的事情，但在 JS 中以正确的方式进行.

var articles = document.getElementsByClassName("article");

for (var i = 0; i < articles.length; i++) {
    articles[i].addEventListener("click", expdr, false);
};

这里我通过搜索该类来定义 articles，还记得我将 article 类添加到 bigMe 元素吗？

然后我循环这些元素并按索引分配一个监听器，我说 onclick 触发 expdr 并且 false 正在冒泡。

接下来让事情发生 -

function expdr() {
    var bigMe = this.querySelector('.bigMe');
    switch (bigMe.style.display) {
        case "block":
            bigMe.style.display = "none";
            break;
        case "none":
            bigMe.style.display = "block";
            break;
        default:
            bigMe.style.display = "none";
            break;
    }
}

因此您可以保留函数expdr，但需要进行一些更改。我们要做的第一件事是获取我们的子元素。在本例中，它是 bigMe，我使用 querySelector() 来查找它。请注意，我说 this.querySelector 我可以使用 this 的原因是因为调用该方法的元素是 articles 所以 this = = 被点击的文章。

现在我们有了 bigMe，我们需要用它来做一些事情。 switch 语句在这里会更有效。原因是在 JS 中，当你有 IF 时，它会一直向下求值。因此，如果您检查 block 并更改为 none，那么在下一个语句中您检查 none ，它会认为该元素设置为 无，因此将其设置回阻止。什么都不会发生。

switch 语句有中断。一旦语句的计算结果为 true，它就会执行其 block 中的任何内容并退出。我还添加了一个 default 语句，该语句包罗万象，将确保无论发生什么事情。

希望这有帮助!