个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 07:44:03 24 4
gpt4 key购买 nike

我有一个 html 文档，其中包含 4 <p> - 体内的标签。我有一个单独的 js 文件，想使用 javascript 来:

  • 在第一段和第三段中创建并放置链接。

  • 创建一个在显示和隐藏文本之间切换的函数当相应的链接是时，每个链接下面的段落 active 。这些段落应该从一开始就隐藏。

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

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

<!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 元素必须包含内容:

   <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 隐藏，则不会反射(reflect)在元素自己的 style.display 属性中。所以你可以使用compulatedStyle，但是你不知道如何设置它。所以事情很困惑。在这种情况下，最好使用类来隐藏和显示元素，然后只需添加或删除该类即可。您应该有一些库函数来帮助解决这一问题，但现在您可以假设元素只有一个类。所以假设有一个类:

.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 - 在显示和隐藏文本之间切换 (javascript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27646852/

24 4 0
文章推荐： javascript - 在 bxslider 中使用 fancybox 时显示多个缩略图
文章推荐： swift - 如何在核心数据中使用 swift 4 Codable？
文章推荐： ios - 如何从 UITextField 键盘中删除模糊
文章推荐： javascript - 如何增加 Android 应用程序 jqMath 方程的字体大小
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com