如何取消隱藏html標簽

Question

我正在嘗試檢查#textd的內容#textd為空，並且包含超過150個字符。 如果是這樣，我將其內容發送到另一個網頁，如果不是，則顯示相對於上下文的錯誤消息。 我正在使用以下代碼進行此操作：

jsFiddle

HTML代碼：

  <a href="#" id="r"><span>AFD</span></a>

  <div class="ooo" hidden>
      <h4 id="titled">FOPJG?</h4>
  </div>
  <div>
       <p id="textd"></p>
  </div>

  <button id="submitd">Submit</button>
</div>

Javascript / jQuery代碼：

$("#r").click(function () {
    $(".ooo").prop("hidden", false);
});

$("#submitd").click(function () {
    if (!$("#textd").empty() && $("#textd").length() < 150) {
        var str = $("#textd").text();
        window.location.replace("foo?d="+str);
    } else {
        if (!$("#textd").empty() && $("#textd").length() > 150) {
            $("#titled").html("FOPJG?<small style='color:red;'>not under 150 chars.</small>");
        } else {
            $("#titled").html("FOPJG?<small style='color:red;'>ABVQS.</small>");
        }
    }
});

這里的問題是，當我單擊該提交按鈕時，不會顯示.ooo 。 我還有另一個問題，相對於上述算法的說明，此實現是否可以正常工作？

Answer 1

幾件事情：

• 您應該使用style="display:none;" 而不是hidden屬性。 這只是更標准的。 此外，對於所有樣式，都應該使用外部樣式表，但這是另一回事。
• 您的if / else邏輯有點錯誤： .empty()刪除了元素中的所有內容-它不會以您期望的方式返回true / false。 請改用.text().length 。
• 您可能還想使用return false; （或e.preventDefault(); ），因此鏈接不會出現在任何地方。

因此，這里是：

的HTML

<a href="#" id="r"><span>AFD</span></a>

<div class="ooo" style="display:none;">
    <h4 id="titled">FOPJG?</h4>
</div>
<div>
    <p id="textd">[ ... ]</p>
</div>

<button id="submitd">Submit</button>

jQuery的

$("#r").click(function () {
    $(".ooo").show();
    return false;
});

$("#submitd").click(function () {
    if ($("#textd").text().length == 0) {
        $("#titled").html("FOPJG?<small style='color:red;'> It's Empty</small>");
    } else if ($("#textd").text().length < 150) {
        $("#titled").html("FOPJG?<small style='color:red;'> Length is under 150 chars.</small>");
    } else if ($("#textd").text().length) {
        $("#titled").html("FOPJG?<small style='color:red;'> Length is over or exactly 150 chars.</small>");
    }
    return false;
});

jsFiddle

Answer 2

您應該使用visibility: hidden而不是html hidden標簽，以便可以在js中輕松更改其屬性