0

我试图在单击链接时更改链接的文本并显示 DIV。用户点击修改后的链接（同一个）后，它应该隐藏 DIV。

它可以显示它，但是由于某种原因，当我单击“隐藏旧新闻”时，DIV 被隐藏了半秒钟，然后再次显示。

它发生在我将链接文本更改为默认文本的那一行（“查看旧新闻...”）

<script>function showoldnews()
      {
          document.getElementById('oldnews').style.display = "block";
          document.getElementById('oldnewslinkid').innerHTML = '<a href="#" id="oldnewslinkid" onclick="hideoldnews(); return false;">Hide older news</a>';

      }
      function hideoldnews()
      {
          document.getElementById('oldnewslinkid').innerHTML = '<a href="#" id="oldnewslinkid" onclick="showoldnews(); return false;">View older news...</a>'; //it calls showoldnews() function for some reason on this line
          document.getElementById('oldnews').style.display = "none";
      }
      </script>

关联

<a href="#" id="oldnewslinkid" onclick="showoldnews(); return false;">View older news...</a>
4

1 回答 1

2

我相信这是因为您在第一个链接中插入了第二个链接，并且 click 事件正在为父锚点而不是子锚点触发。

您的标记：

    <a href="#" id="oldnewslinkid" onclick="showoldnews(); return false;">
     <a href="#" id="oldnewslinkid" onclick="hideoldnews(); return false;">Hide older  news</a>
   </a>

有几种方法可以解决这个问题：

  1. 将控件包装在包含 div 中，并将新锚附加到其innerHTML
  2. 在加载时在 dom 中包含两组控件，hideOldNews()通过 css 隐藏您的控件，并通过 js 切换它们

  3. 将事件侦听器附加到一个元素，并使用它来“切换”您的新闻 div：

    HTML

    <div id="oldnews">Old News...</div>
<a href="oldnews" id="toggle">View older news...</a>

    JS

    var toggle = document.getElementById('toggle')

toggle.addEventListener('click', function(e){
  e.preventDefault()
  var target = document.getElementById("oldnews"); // href="oldnews"
console.log(target);

  target.style.display = (target.style.display == 'none') ? 'block' : 'none';

});

    codepen

我的建议是使用事件处理程序，它会让你的生活变得更简单，因为你不必编辑嵌套在HTML元素内的单行 JS。addEventListener 有一些轻微的跨浏览器问题（IE8 使用特殊的attachEvent处理程序），有一些简单的方法可以解决这个问题。

于 2013-06-04T20:43:01.047 回答