Question

我正在尝试更改链接的文本，当它被单击并显示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>

Answer 1

我相信这种情况正在发生，因为您在第一个链接中插入了第二个链接，而点击事件正在为父锚而不是孩子触发。

您的加价：

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

有几种解决方法：

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

将事件监听器附加到一个元素，并使用它来“切换”您的新闻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处理程序），有一些简单的ways来解决这个问题。

Javascript innerHTML调用onclick函数

1 个答案: