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>

我现在想做的很简单：单击元素＆＃34;按钮＆＃34;后，将显示隐藏的内容，锚<a>将变为不可见。

所以我要找的是： onclick：if element＆＃34; spoiler＆＃34;显示=无AND元素＆＃34;按钮＆＃34;是显示=初始那么元素＆＃34;扰流＆＃34;应改为display = initial AND element＆＃34; button＆＃34;应改为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>

Answer 2

display="initial"不是有效的属性。此外，将所有代码放在onclick属性中会阻止您重用其他扰流程序块中的代码。最佳解决方案是使用script标记来分离关注点和可重用性。

以下是您需要的内容：

<div id="spoiler" style="display:none">HIDDEN CONTENT HERE</div> 
<a onclick="showSpoiler(this,'spoiler')">Show hidden content</a>
<script>
function showSpoiler(buttonNode, spoilerId) {
    document.getElementById(spoilerId).style.display='block';
    buttonNode.style.display='none';
}
</script>

具有onclick和2个条件的扰流器代码

2 个答案: