Javascript innerHTML/jQuery .html() 每个 id 只能工作一次？

Posted 2023-05-07

【中文标题】Javascript innerHTML/jQuery .html() 每个 id 只能工作一次？

【英文标题】：Javascript innerHTML/jQuery .html() only works once per id?

【发布时间】：2018-06-26 00:10:25

【问题描述】：

我对这个场景比较陌生，只是不明白。

所以我正在检查 IBAN 号码是否有效。我现在开始了那部分。但现在我想显示“IBAN not ok”和“IBAN ok”之类的消息。

我尝试这样做的方法是创建一个空的 span 元素并使用 id 更改该元素的 innerhtml。

HTML：

 <div class="form-group">
   <label for="confirm" class="cols-sm-2 control-<label">IBAN</label>
     <div class="cols-sm-10">
       <div class="input-group">
           <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
            <input type="text" class="form-control iban" name="iban" id="iban" required/>
            <span id="message"></span>
        </div>
      </div>
   <button id="checkiban" class="btn btn-primary btn-lg btn-block login-button" onclick="alertValidIBAN(null)">Check IBAN</button>
</div>

jQuery:

function alertValidIBAN(iban) 
var ibanvalid = isValidIBANNumber(document.getElementById("iban").value);
if(ibanvalid === false) 
    $("#message").html("IBAN onjuist").fadeOut(1000);
    console.log("IBAN not ok");

if(ibanvalid === 1) 
    $("#message").html("IBAN ok").fadeOut(1000);
    console.log("IBAN ok");
  

所以现在如果我按下按钮并且 IBAN 无效，我会收到消息说它不正常，这很好！然后，如果我再次按下按钮，什么都不会发生..

如果我随后刷新页面并输入有效的 IBAN，它会显示消息正常，这很好！然后，如果我再次按下按钮，什么都不会发生..

如果有人可以帮助我，那就太好了！ :)

最好的问候

【问题讨论】：

试试这个$("#message").show().html("IBAN onjuist").fadeOut(1000)

淡出的元素将保持不可见，除非您再次显示它。另外，如果你只想设置元素的文本内容，你应该使用.text()，而不是.html()。

【参考方案1】：

试试这个，添加一个显示方法

if(ibanvalid === false) 
    $("#message").show().html("IBAN onjuist").fadeOut(1000);
    console.log("IBAN not ok");

if(ibanvalid === 1) 
    $("#message").show().html("IBAN ok").fadeOut(1000);
    console.log("IBAN ok");
  

【讨论】：

我知道这是一个我不知道的简单解决方案。非常感谢！

【参考方案2】：

JQuery fadeout() 使元素不可见，因此第二次调用它时它会更改消息但不显示它，因为它的不透明度为 0。正如@AswinRamesh 所说，您还需要调用.show() 函数才能使其可见：

function alertValidIBAN(iban) 
var ibanvalid = isValidIBANNumber(document.getElementById("iban").value);
if(ibanvalid === false) 
    $("#message").show().html("IBAN onjuist").fadeOut(1000);
    console.log("IBAN not ok");

if(ibanvalid === 1) 
    $("#message").show().html("IBAN ok").fadeOut(1000);
    console.log("IBAN ok");
  

【讨论】：

我知道这是一个我不知道的简单解决方案。非常感谢！