Question

我有一个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";
        }
    }

Answer 1

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

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

   <meta charset="utf-8">

title 元素必须包含内容：

   <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';

并重命名addButtons函数。然后是：

       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）中运行。

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

1 个答案: