编辑CSS的可重用功能

Reusable Function to Edit CSS

本文关键字：功能 CSS 编辑      更新时间：2023-09-26

我已经为此寻找了一个解决方案。我无法使用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。

尽量避免内联操作-这可能会导致问题，并且会变得相当混乱。还是一起做比较好。

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 == article。

现在我们有了bigMe，我们需要用它做一些事情。switch语句在这里会更有效。原因是，在JS中，当你有一个IF，它会评估所有的方式。因此，如果您检查block并更改为none，那么在您检查none的下一个语句中，它将认为元素设置为none，因此将其设置回block。什么事也不会发生的。

switch语句有断点。一旦一个语句被计算为true，那么它执行它的块中的任何内容并退出。我还添加了一个default语句，这是一个捕获所有内容的语句，它将确保无论发生什么事情，

希望这对你有帮助!

相关文章：