在显示和隐藏文本(javascript）之间切换

Toggle between showing and hiding text (javascript)

本文关键字：之间 javascript 显示 隐藏 文本      更新时间：2023-09-26

我有一个 html 文档，正文中有 4 个<p>标签。我有一个单独的js文件，想使用javascript来：

  • 在第 1 段和第 3 段中创建链接并将其放入。

  • 创建一个在显示和隐藏文本之间切换的函数当相应链接为激活。这些段落应从一开始就隐藏起来。

我无法让切换功能工作。该页面仍然从一开始就显示所有段落，当我单击链接时，页面只会闪烁一毫秒。

下面是我的代码。我是初学者，我知道这是糟糕的代码，但我只是希望它是一个工作脚本。我不知道为什么它不起作用，所以非常感谢擅长这方面的人的帮助。

<!doctype html>
<html>
   <head>
   <meta charset="utf-8"/>
   <title></title>
 </head>  
 <body>
 <p>When this link is activated..</p>
 <p id="displayPara">..I want this hidden paragraph to be revealed.</p>
 <p>And if the link below is clicked..</p>
 <p>..this paragraph should be revealed.</p>
 <script type="text/javascript" src="showHide.js"></script>
 </body>
</html>

         The JS-file:
//Creates the 2 links and puts them where I want them in the document body.
function Links() {                                          
        a = document.createElement("a");
        a.setAttribute("href", "showHide.html");
        a.setAttribute("id", "firstLink");                             
        a.innerHTML = "<br></br>Show paragraph";
        document.getElementsByTagName("p")[0].appendChild(a);
        a2 = document.createElement("a");
        a2.setAttribute("href", "showHide.html");
        a2.setAttribute("id", "secondLink");                        
        a2.innerHTML = "<br></br>Show paragraph";
        document.getElementsByTagName("p")[2].appendChild(a2);
    }
    Links();
    /*I want this function to toggle between showing and hiding the 2nd and 4th paragraphs when the links are clicked. 
    I tried with the first link first and it doesn't work.*/
    a.onclick = function toggle() {
         displayPara = document.getElementById("displayPara");
         firstLink = document.getElementById("firstLink");
        if(displayPara.style.display == "block") {
                displayPara.style.display = "none";
            firstLink.innerHTML = "Show paragraph"
        }
        else {
            displayPara.style.display = "block";
            firstLink.innerHTML = "Hide paragraph";
        }
    } 

<!doctype html>
<html>
   <head>
   <meta charset="utf-8"/>

这不是XML，没有短标记。用：

   <meta charset="utf-8">

标题元素必须包含以下内容：

   <title>Show Hide</title>

在脚本中：

//Creates the 2 links and puts them where I want them in the document body.
function Links() {

按照惯例，以大写字母开头的函数名称是为构造函数保留的。此外，函数的名称应该暗示它的作用，因此：

function addLinks() {
        a = document.createElement("a");
        a.setAttribute("href", "showHide.html");
        a.setAttribute("id", "firstLink");

与其使用 setAttribute，不如直接设置属性更方便：

    a.href = 'showHide.html';
    a.id = 'firstLink';

大概shoeHide.html是你的代码所在的HTML文件的名称。因此，当单击链接时，页面会重新加载。与其使用链接，在用户看来它应该转到另一个页面，不如使用一个按钮，它指示将会发生某些事情，但可能不会将用户带到任何地方。它也不需要 href 属性。

正如Lior所说，单击链接将重新加载页面，因此无论脚本可能进行什么修改，它们都是无关紧要的，因为原始页面随后被重新加载。

        a.innerHTML = "<br></br>Show paragraph";

BR 元素为空，它没有内容，也没有结束标记，因此：

        a.innerHTML = "<br>Show paragraph";

但是，由于我建议改用按钮，请考虑：

    var a = document.createElement('input');
    a.type = 'button';
    a.className = 'openCloseButton';
    a.value = 'Show paragraph';

并重命名函数添加按钮。然后是：

       document.getElementsByTagName("p")[0].appendChild(a);

这很好。由于你想要在另一个P上有一个相同的按钮，你可以克隆你刚刚制作的那个：

        document.getElementsByTagName("p")[2].appendChild(a.cloneNode());

这些按钮不需要 ID。但是您可以考虑为需要按钮的段落指定一个类，以便您可以按 className 访问它们，就像下面的按钮一样。

    }
    Links();

现在是切换代码。您可以使用它们的类获取按钮：

var buttons = document.querySelectorAll('.openCloseButton');

现在，将相同的侦听器添加到每个侦听器：

for (var i=0, iLen=buttons.length; i<iLen; i++) {

现在是附件。

    a.onclick = function toggle() {

无需为函数表达式命名。它们只是在那里，所以可以从函数内部引用函数（它们对于调试也很方便）。某些版本的 IE 将命名函数表达式创建为全局函数，因此最好不要为它们命名，除非您有充分的理由这样做。

    buttons[i].onclick = function() {

现在到了棘手的部分，如何引用相关段落进行隐藏或显示？感兴趣的段落是按钮所在段落的下一个同级，这有点棘手。在执行此操作之前，您应该仔细考虑 DOM 布局，因为对结构的任何更改都会破坏您的函数。因此，拆分出一个函数来获取下一段同级，可能如下所示：

function getNextParaSibling(el) {
  var next;
  // Search siblings until a P is found
  while (el.nextSibling) {
    next = el.nextSibling;
    if (next.tagName && next.tagName.toLowerCase() == 'p') {
      return next;
    }
    el = next;
  }
  // If a next sibling P isn't found, return null
  return null;
}

所以现在在主要功能...

    displayPara = getNextParaSibling(this.parentNode);

而且因为您无法确定是否有效，所以请忽略它：

    if (!displayPara) return;

现在，如果元素已使用 CSS 隐藏，则不会反映在元素自己的 style.display 属性中。所以你可以使用 computedStyle，但你不知道如何设置它。所以事情很混乱。在这种情况下，最好使用类隐藏和显示元素，然后只需添加或删除类即可。你应该有一些库函数来帮助解决这个问题，但现在你可以假设元素只有一个类。所以假设有一个类，比如：

.hideMe {display: none;}

然后您将其添加到要隐藏的段落中，例如：

<p class="hideMe" ...>

然后你可以做：

    // If element is hidden
    if (displayPara.className == 'hideMe') {
      displayPara.className = '';
    } else {
      displayPara.className = 'hideMe';
    }

大功告成。总之，HTML 可以是：

<p>When this link is activated..</p>
<p class="hideMe">..I want this hidden paragraph to be revealed.</p>
<p>And if the link below is clicked..</p>
<p class="hideMe">..this paragraph should be revealed.</p>

和脚本：

function addButtons() {
  var a = document.createElement('input');
  a.type = 'button';
  a.className = 'openCloseButton';
  a.value = 'Show paragraph';
  document.getElementsByTagName("p")[0].appendChild(a);
  document.getElementsByTagName("p")[2].appendChild(a.cloneNode());
}
addButtons();
function getNextParaSibling(el) {
  var next;
  // Search siblings until a P is found
  while (el.nextSibling) {
    next = el.nextSibling;
    if (next.tagName && next.tagName.toLowerCase() == 'p') {
      return next;
    }
    el = next;
  }
  // If a next sibling P isn't found, return null
  return null;
}
var buttons = document.querySelectorAll('.openCloseButton');
for (var i=0, iLen=buttons.length; i<iLen; i++) {
  buttons[i].onclick = function() {
  displayPara = getNextParaSibling(this.parentNode);
  if (!displayPara) return;
    // If element is hidden
    if (displayPara.className == 'hideMe') {
      displayPara.className = '';
    } else {
      displayPara.className = 'hideMe';
    }
  }
}

尽管所有这些都应该从立即调用的函数表达式（也称为 IIFE）内部运行。

相关文章：