HTML

Question

基本上，如果有人可以提供有关如何实现此目标的指导，那就太好了。

我使用第 3 个 SAS，当登录它时，它 returns class="SFnam" 的用户名可以显示在任何嵌入了关联 JS 的页面上在页面底部。

目前我使用以下 html 在登录时在屏幕右上角显示用户名：即 "Logged in as: BORIS SMITH"，但是当用户未登录时显示"Logged in as:"。不理想。

如果 class="SFnam" 为空，我如何显示 "LOGIN"？

这是我正在使用的（在 Rafaels 输入之后）：

 <script type="text/javascript">
 window.addEventListener("DOMContentLoaded", function(event) {
    var spanElm = document.getElementById('myspan');

    if(spanElm.classList.contains('SFnam'))
    {
          console.log('here');
    }
    else
    {
        console.log('here instead');
        document.getElementsByTagName('user')[0].innerHTML = "LOGIN";
    }
});
 </script>
 <style>
 #loginwrapper {
    margin: 0px 0px 0px Opx;
    border: none;
    cursor: pointer;
 }
 .logincontainer {  text-align: right;}
 user {
    display: inline-flex;
    background-color: #1f7665; color: #fff;
    padding:2px 3px 1px 3px;
    font-size:8px;
    margin-right: 10px;
    border-radius: 3px;
    font-family: Raleway, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
 }
 </style>
 <div id="loginwrapper" title ="Click to Log in/out" onclick="window.open('/member-login.html','_self')">
    <div class="logincontainer">
            <user>Logged in as:&nbsp; <b><span style="text-transform:uppercase;" class="SFnam" id='myspan'></span></b>
    </div>
 </div>

登录span时结果为：鲍里斯·史密斯< /span>

注销后跨度结果为： <跨度class="SFnam">

我对此相当陌生，但我有一些基本编码等技能，如果以上内容构建不当，我深表歉意:(。

任何指导/帮助将不胜感激。

干杯鲍里斯

已编辑：另外值得注意的是每页底部的监听器脚本（不确定是否有帮助？:

 <script>(function(){var i,j,a,x;try{x=localStorage.getItem("SF_nam");}catch(e){x="";}
 try{for(a=document.querySelectorAll(".SFnam"),i=a.length-1;i>=0;i--)a[i].innerHTML=x?x:"";}catch(e){}
 try{for(a=document.querySelectorAll(".SF_li"),i=a.length-1;i>=0;i--)a[i].style.display=x?"":"none";}catch(e){}
 try{for(a=document.querySelectorAll(".SF_lo"),i=a.length-1;i>=0;i--)a[i].style.display=x?"none":"";}catch(e){}})();
 </script>

Answer 1

这将根据包含或不包含文本的范围 class 相应地更改元素的文本。

function updateSpan()
{
     var spanElm = document.getElementById('myspan');
        if(spanElm.innerHTML)
        {
              document.getElementsByTagName('user')[0].innerHTML = "Logged in as " + spanElm.innerHTML;
        }
        else
        {

            document.getElementsByTagName('user')[0].innerHTML = "LOGIN";
        }
}

window.addEventListener("DOMContentLoaded", function(event) {
        updateSpan();

    });

为您的跨度添加一个 ID，以便我们可以找到它

<span style="text-transform:uppercase;"class="SFnam" id='myspan'></span>

用这个更新你的底部脚本

<script>(function(){var i,j,a,x;try{x=localStorage.getItem("SF_nam");}catch(e){x="";}
 try{for(a=document.querySelectorAll(".SFnam"),i=a.length-1;i>=0;i--)a[i].innerHTML=x?x:"";}catch(e){}
 try{for(a=document.querySelectorAll(".SF_li"),i=a.length-1;i>=0;i--)a[i].style.display=x?"":"none";}catch(e){}
 try{for(a=document.querySelectorAll(".SF_lo"),i=a.length-1;i>=0;i--)a[i].style.display=x?"none":"";}catch(e){}
updateSpan()})();
 </script>

如果在执行期间发生更改，这将确保函数也会更新。这是 JSFiddle

HTML - 如果成员名称 CLASS 为空，如何显示 "LOGIN"

HTML - How to display "LOGIN" if member name CLASS is empty

hide