在 HTML 中隐藏和显示跨度

Hiding and showing span in HTML

本文关键字：显示 隐藏 HTML      更新时间：2023-09-26

我有一个JSP页面，上面有一些input submit按钮。现在，根据我从AJAX请求中获得的一些值，我想控制display and hiding of these input buttons.所以我为每个输入创建了spans。根据我从 AJAX 请求收到的变量值，我在那里操作显示属性。但我没有得到正确的结果。

这是我的代码： 

<td style="width: 600px"><span id="startspan"><input name="start" value="startActivity" type="submit" id="startbuttonid"></span></td>
       <td style="width: 600px"><span id="holdspan"><input name="start" value="holdActivity" type="submit" id="holdbuttonid"></span></td>
       <td style="width: 600px"><span id="cancelspan"><input name="start" value="cancelActivity" type="submit" id="cancelbuttonid"></span></td>
       <td style="width: 600px"><span id="closespan"><input name="start" value="closeActivity" type="submit" id="closebuttonid"></span></td>

我正在编写代码以显示或隐藏它们的java script代码是：： 

if(temp1[15]=="InProcess"){
        document.getElementById('startspan').style.display='none';
        document.getElementById('holdspan').style.display = 'block';
        document.getElementById('cancelspan').style.display = 'block';
        document.getElementById('closespan').style.display = 'block';
    }
    if(temp1[15]=="New"){
        document.getElementById('startspan').style.display='block';
        document.getElementById('holdspan').style.display = 'none';
        document.getElementById('cancelspan').style.display = 'block';
        document.getElementById('closespan').style.display = 'none';
    }

这里基于我收到的变量temp1[15]值。我想显示或隐藏这些输入提交按钮。我正在以正确的方式做到这一点，例如定义跨度或需要一些更正。基本上所有这些输入按钮都在一个dialog box <div>内，只有当一个函数被触发时，它才会打开，我已经在其中编写了隐藏或显示范围代码（上面写的）。需要帮助。谢谢。

CSS 中的 display 属性还决定了它的行为是否像块（DIV、P 等）或内联元素（span、b 等），以及它的可见性。

对于您的跨度，您希望改为执行以下操作：

document.getElementById('span').style.display = 'inline';

如果是 DIV，你会使用 block，如果是 IMG，你会使用 inline-block 。

由于它是在小提琴中而不是在您的主代码中工作的，我怀疑可能存在与在加载 DOM 之前执行代码（或生成dialog box <div>）相关的问题。你提到你正在使用 AJAX。确保用于显示或隐藏按钮的代码位于 AJAX 成功回调中。

相关文章：