javascript - 如何取消隐藏 html 标签

Question

我正在尝试检查 #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