2

单击按钮后，我想显示音频播放器。这是我的代码

<script type="text/javascript">
    function viewAudio() {
        document.getElementById('myAudio').style.display = ""
    }
    document.getElementById('myAudio').style.display = "none"


</script>

<button value="@Html.DisplayFor(modelItem => item.SampleURL)" id="audioViewer" onclick="viewAudio()">
            <img src="../../Content/images/audio.png"></button>

<div id="myAudio">
<audio controls preload="none">
    <source src="#" type="audio/mp3">
</audio>
</div>

但是，当我在浏览器中运行时，它仍然显示音频播放器。有什么解决方案吗？

4

3 回答 3

3

首先，要让播放器默认隐藏，您不需要使用 JavaScript。改为将此类样式添加到容器中：

 <div id="myAudio" style="display: none;">

并在单击按钮时将其显示回来：

function viewAudio() {
    document.getElementById('myAudio').style.display = "block";
}
于 2013-07-18T12:48:50.170 回答
0

如果这是一个 ASP 页面，那么该按钮单击可能正在执行回发。这将重置状态。您应该return false;在onclick.

或者，如果问题是 div 从未隐藏，您可以直接在 html 标记中的 div 元素上设置样式。

确保您使用浏览器的开发工具来检查当前正在查看的元素上的 css 样式。您还可以在浏览器中设置断点并单步执行您的 javascript 代码。

于 2013-07-18T05:09:04.230 回答
0 
<asp:Button ID="ButtonShowPanel" CausesValidation="false" CssClass="btn btn-primary pull-right" runat="server" Text="Add Contact" OnClientClick="javascript:SetVisiblityPanels(false); return false;" />


        function SetVisiblityPanels(check) {
            if (check) {
                $('.SearchPanel').show(1000);
                $('.DescriptionPanel').hide(1000);
            }
            else {
                $('.SearchPanel').hide(1000);
                $('.DescriptionPanel').show(1000);
            }
        }

于 2016-11-25T10:43:28.493 回答