javascript - 带有 onclick 和 2 个条件的剧透代码

Question

我的主页上有一个剧透代码。 代码如下所示:

<div id="spoiler" style="display:none"> 
HIDDEN CONTENT HERE
</div> 
<a display="initial" 
   id="button" 
   title="Click to show/hide content" 
   type="button" 
   onclick="if(document.getElementById('spoiler')                     
                       .style.display=='none') {
               document.getElementById('spoiler')                                    
                       .style.display=''
            }else{
               document.getElementById('spoiler')               
                       .style.display='none'
            }">
   Show hidden content
</a>

我现在想做的很简单: 单击元素“按钮”后，应显示隐藏内容和 anchor <a>将变得不可见。

所以我要找的是: onclick:如果元素“spoiler”显示=none 且元素“button”显示=initial 则元素“spoiler”应更改为display=initial 且元素“button”应更改为display=none

这可能吗？

Answer 1

jquery 中的这段代码将解决您的问题。我希望这就是你想要的。

$('#button').click(function() {
        $('#spoiler').css('display', 'block');
      $(this).hide();
    });

我有演示 here

只有 JavaScript 的解决方案如下:

<div id="spoiler" style="display:none"> 
HIDDEN CONTENT HERE
</div> 
<a display="initial" id="button" title="Click to show/hide content" type="button" onclick="document.getElementById('spoiler').style.display='block';
  document.getElementById('button').style.display='none'">Show hidden content</a>