如何使用Javascript更改按鈕的文本？-有解無憂

我正在嘗試使一個簡單的可折疊披露按鈕觸發一個視窗，該視窗將顯示披露（或在本例中為填充文本），然后在單擊時再次隱藏它。我的折疊代碼大部分都在作業，但我無法正確處理的部分是我使用 Unicode 生成的指向右箭頭。我希望它更改為向下箭頭，但由于某種原因，我無法讓腳本作業。

我對此很陌生，我一直在嘗試拼湊我在這里找到的各種解決方案，但不幸的是，我遇到了我似乎無法找到的障礙。

我的代碼還拋出一個錯誤，指出即使它已定義并且似乎確實可以完成作業，但該公開折疊函式不是一個函式。它只是文本更改功能，在點擊時什么都不做。

在某些時候，我想將 Unicode 箭頭換成 chevron svgs，因為它們不會像 Unicode 箭頭那樣在移動設備上格式化，但我需要先弄清楚 JS 部分，然后再讓它變得更復雜。

// Disclosure Display //
var acc = document.getElementsByClassName("disclosureAccordionBtn");
var i;

for (i = 0; i < acc.length; i  ) {
  acc[i].addEventListener("click", function(displayDisclosure) {
    this.classList.toggle("active");
    var disclosurePanel = this.nextElementSibling;
    if (disclosurePanel.style.display == "block") {
      disclosurePanel.style.display = "none";
    } else {
      disclosurePanel.style.display = "block";
    }
  });
}
// Disclosure Label Text Change Arrow Direction //
function disclosureLabelText() {
  var btn = document.getElementById("disclosureLabel");

  if (btn.value == "&#9654;Disclosure") {
    btn.value = "&#9660;Disclosure";

  } else {
    btn.value = "&#9654;Disclosure";
  }
}

<!-- disclosure button -->
<input id="disclosureLabel" class="disclosureAccordionBtn" type="button" onclick="displayDisclosure(); disclosureLabelText();" value="&#9654;Disclosure" style="outline: none; border: none; color: #646464; cursor: pointer; text-decoration: none; background-color: transparent; text-align: center; font-size: 11px"
/>

<!-- disclosure collapse -->
<div id="displayDisclosure" class="disclosurePanel" style="display: none; outline: none; border: none; color: #646464; text-decoration: none; background-color: transparent; text-align: center; font-size: 11px; text-align: justify; text-justify: inter-word; margin-left: 0.5%; margin-right: 0.5%; margin-top: -0.7%; margin-bottom: 0.5%">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor
  sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

這是一個包含所有內容的 JSFiddle：

https://jsfiddle.net/ts0p94bk/

uj5u.com熱心網友回復：

要解決此問題，請從 onclick 屬性值中洗掉 displayDisclosure()。之后它作業正常。

在代碼中 displayDisclosure 是當您將事件偵聽器添加到按鈕時的回呼函式引數。

以下是我可能會如何實作你正在做的事情：

<head>
  <style>
    span.up {
      display: none;
    }
    span.down {
      display: inline;
    }
    p.content {
      display: none;
    }
    .showContent span.up {
      display: inline;
    }
    .showContent span.down {
      display: none;
    }
    .showContent p.content {
      display: block;
    }
  </style>
</head>
<body>
  <section id="container">
    <button id="toggleButton">
      <span class="up">&#9660;</span>
      <span class="down">&#9654;</span> 
      Button Label
    </button>
    <p class="content">
      My content
    </p>
  </section>
  <script>
    const container = document.getElementById('container');
    const button = document.getElementById('toggleButton');
    button.addEventListener('click', () => container.classList.toggle('showContent'));
  </script>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418301.html

標籤：

上一篇：flex如何影響影像的寬度？

下一篇：如何在:hover上更改字體大小但它保持居中