Question

当您单击Capacitor 10pf时，本页顶部的文本http://acsoundstudio.com/bb/2520dip8/应该会更改，但是然后单击39pf会更改背景中的图像，但不会更改10pf到39pf。它保持在10pf。

我不确定是什么导致了这一点。以下是一些示例代码：

HTML：

<li>
    <a href="javascript:void(0)">Capacitors | pF</a>

        <ul class="dl-submenu">
          <li><a href="javascript:void(0)" onclick='topCap1()'>10pf</a></li>

          <li><a href="javascript:void(0)" onclick='topCap2()'>39pf</a></li>

          <li><a href="javascript:void(0)" onclick='topCap3()'>47pf</a></li>

          <li><a href="javascript:void(0)" onclick='topCap4()'>1000pf</a></li>
        </ul>
</li>

JS：

function topCap1() {
  document.getElementById('bbtop').src = "img/2520dip8_c1_10pf.png";
  document.getElementById('bbdefine').innerHTML = "10pf Capacitor";
}

function topCap2() {
  document.getElementById('bbtop').src = "img/2520dip8_c2_39pf.png";
  document.getElementById('bbdefine').innerHTML = "39pf Capacitor";
}

function topCap3() {
  document.getElementById('bbtop').src = "img/2520dip8_c4-5_47pf.png";
  document.getElementById('bbdefine').innerHTML = "47pf Capacitors";
}

function topCap4() {
  document.getElementById('bbtop').src = "img/2520dip8_c6_1000pf.png";
  document.getElementById('bbdefine').innerHTML = "1000pf Capacitor";
}

此外，如果您对简化此代码有任何想法，我将非常感激。

Answer 1

这是一个更轻松的方法。只需添加后台逻辑。的 Live demo (click).

<div id="bbtop"></div> <div id="bbdefine"></div> <ul class="dl-submenu"> <li><a>10pf</a></li> <li><a>39pf</a></li> <li><a>47pf</a></li> <li><a>1000pf</a></li> </ul>

JavaScript的：

var bbdefine = document.getElementById('bbdefine'); var elems = document.querySelectorAll('.dl-submenu li a'); for (var i=0; i<elems.length; ++i) { elems[i].addEventListener('click', clickFunc); } function clickFunc(event) { bbdefine.textContent = this.textContent+' Capacitor'; }

内联JS（比如onclick和你的html中的js hrefs）从来都不是一个好习惯。相反，使用javascript附加事件侦听器。我建议您阅读以下部分结果： Why is inline js bad?

如果您需要支持旧浏览器，请测试此代码并检查控制台是否存在错误，然后填充任何不可用的内容。不幸的是，addEventListener并不总是存在。

innerHTML有时会起作用，有时候不会吗？

1 个答案: