Question

我已经为此寻找了解决方案。我无法使用jQuery并且难以使用JavaScript但它必须使用JavaScript。

我想使用一个函数来编辑我点击的div的子节点。我还想在

上重用该功能

这是标记：

＆＃13;

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

＆＃13;

.bigMe    {display: block;}

＆＃13;

<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>

＆＃13;

提前感谢您对我的轻松，再次，我在使用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>

请注意，我还为每个ID提供了bigMe，以便更清楚地说明其工作原理。

接下来我们需要做的是定义我们的元素＆amp;附上一些听众，这基本上就是你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 fire 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语句在这里会更有效。原因在于，当你有一个IF时，它会一直评估。因此，如果您检查block并更改为none，则在下一个语句中检查none，它会认为该元素设置为none，因此请将其设置为块。什么都不会发生。

switch语句有中断。一旦语句评估为true，它就会在其块中执行任何操作并退出。我还在一个default语句中添加了一个可以确保无论发生什么事情的所有内容。

希望这有帮助！

用于编辑CSS的可重用函数

1 个答案: