Question

所以我得到了这段代码

<div style="margin: 5px 20px 5px 20px;"> 
    <div style="margin-bottom:2px; font-size: 80%;">
        <strong>Spoiler  </strong><input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" /> 
    </div> 
<div>

    <div style="display: none;">
        <div style="background: rgba(15, 15, 15, 0.8); padding: 6px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">{param}
        </div>
    </div>

它工作正常，隐藏/显示工作正常，但按钮的值不会改变（例如显示或隐藏）。我试图在代码中更改它，但它不会真的有用，有人可以帮助我吗？ P.S这被用作Vbulletin论坛，作为bbcode。

谢谢！约迪

Answer 1

只需删除this.innerText = '';位即可。你为什么甚至把它们放在那里？

<div style="margin: 5px 20px 5px 20px;">
    <div style="margin-bottom:2px; font-size: 80%;"> <strong>Spoiler  </strong>
        <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show'; }" />
    </div>
    <div>
    <div style="display: none;">
        <div style="background: rgba(15, 15, 15, 0.8); padding: 6px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">{param}</div>
    </div>

为了便于阅读，我建议将所有CSS样式放在外部CSS文件中，将JavaScript放在函数中，也放在外部JS文件中，但这取决于你。

Answer 2

我很高兴@ putvande的答案解决了你的问题，但我认为仍然难以阅读这一行代码到底发生了什么。

如前所述，我还建议将代码分成同一HTML文件中的内联块，或者 - 甚至更好 - 分成单独的文件，这样就可以保持代码的可读性。

我还认为，与简单地使用类相比，使用原始DOM API调用来获取第二个div太复杂了（参见JS方法）。

以下内容取自我为您的问题创建的小提琴：

<!-- The updated HTML: -->
<div style="container"> 
    <div class="wrapper">
        <strong>Spoiler </strong><input class="button" type="button" value="Show" onclick="handleClick(this);" /> 
    </div> 
<div>

<div class="banner-container">
    <div class="banner">{param}</div>
</div>

// The JavaScript code extracted:

    function handleClick (target) {
        var el = document.getElementsByClassName('banner-container')[0];
        if (el.style.display === '') {
          el.style.display = 'block';
          target.value = 'Hide';
        } else {
          el.style.display = '';
          target.value = 'Show';
        }
    };

/* The CSS extracted: */

    .container {
        margin: 5px 20px 5px 20px;
    }
    .wrapper {
        margin-bottom: 2px;
        font-size: 80%;
    }
    .button {
        width: 45px;
        font-size: 10px;
        margin: 0px;
        padding: 0px;
    }

    .banner-container {
        display: none;
    }
    .banner {
        background: rgba(15, 15, 15, 0.8);
        padding: 12px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

小提琴： http://jsfiddle.net/robertp/3D63f/14/

下次你在StackOverflow中询问时，请将你的代码分开，以便更容易阅读 - JSFiddle是一个非常有用的工具：）

Javascript剧透人员的困难

2 个答案: