Question

我想在以下代码中将图标从expand_more更改为expand_less

<div class="container">
            <div class="row wow animated fadeInUp" data-wow-duration="1s" data-wow-delay="1s">
                <div class="col-md-4">
                    <div class="services-item">
                        <div class="services-item-icon">
                            <i class="fa fa-paint-brush fa-3x"></i>
                        </div>
                        <div class="services-item-title">
                            <h3>Web Design</h3>
                        </div>
                        <div class="services-item-text">
                            <p>Lorem ipsum dolor sit amet, consectetur<br> adipisicing elit.</p>
                        </div>
                    </div>
                </div>

我将多次使用相同的代码，因此最好多次使用函数。我想到了对每段代码都使用ID，但这太忙了。因此，我想编写单个函数来执行此操作，但是我不知道如何操作，所以请帮忙。

Answer 1

只需将对象事件作为参数传递，例如将e传递给dropdown()，然后使用 textContent 属性检索当前元素的内容，检查它的值并将内容替换为另一个文本内容，例如：

var btn = document.getElementById("dropdownBt");

function dropdown(e) {
  var innerText = e.target.children[0];
  
  if(innerText.textContent == "expand_more") {
  	innerText.textContent = "expand_less";
  } else {
    innerText.textContent = "expand_more";
  }
}

btn.addEventListener('click', dropdown);

<li class="dropdown-bt" id="dropdownBt"><a>dropdown-content <i class="material-icons">expand_more</i></a></li>

使用javascript更改子元素的innerHTML

1 个答案: