时间戳

首页 > 解决方案 > 如何在不设置几个函数 onclick 的情况下替换多个 div？

javascript - 如何在不设置几个函数 onclick 的情况下替换多个 div？

问题描述

由于某些原因，我正在使用 vanilla JS，并在单击 li 时尝试替换 div 内容。

我试图用函数（目标，源）替换，但目标总是= id。所以我克隆了我的函数并 onclick li 插入 2 个函数 + 参数。

<body>
  <li onClick="replaceContentInContainer('target', 'replace_target_div2'); replaceContentInContainerTwo('targetTwo', 'replace_target_div2_02')">View Div 2</li>
  <li onClick="replaceContentInContainer('target', 'replace_target_div3'); replaceContentInContainerTwo('targetTwo', 'replace_target_div3_02')">View Div 3</li>
  <div>
    <span id="target">div1</span>
  </div>

  <div style="display:none">
    <span id="replace_target_div2">div2</span>
  </div>

  <div style="display:none">
    <span id="replace_target_div3">div3</span>
  </div>


  <div>
    <span id="targetTwo">div1</span>
  </div>

  <div style="display:none">
    <span id="replace_target_div2_02">div2 02</span>
  </div>

  <div style="display:none">
    <span id="replace_target_div3_02">div3 03</span>
  </div>

</body>
<script>
  function replaceContentInContainer(target, source) {
    document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
  }

  function replaceContentInContainerTwo(targetTwo, sourceTwo) {
    document.getElementById(targetTwo).innerHTML = document.getElementById(sourceTwo).innerHTML;
  }
</script>

我想有优雅的方式来做到这一点。

标签： javascripthtmlcss

解决方案

您可以使用以下代码：

<body>
  <li onClick="replaceContentInContainer('target', 'div2');">View Div 2</li>
  <li onClick="replaceContentInContainer('target', 'div3')">View Div 3</li>
  <div>
    <span class="target">div1</span>
  </div>

  <div>
    <span class="target">div1</span>
  </div>

</body>
<script>
  function replaceContentInContainer(div, text) {
    var ids = document.getElementsByClassName(div);
    for (var i = 0; i < ids.length; i++) {
        ids[i].innerText = text;
    }
  }
  </script>

推荐阅读