jsFiddle

Question

我试图检查#textd中的内容是否为空并且包含超过150个字符。如果是这样，我将其内容发送到另一个网页，如果不是，我显示相对于上下文的错误消息。我是用这些代码做的：

jsFiddle

HTML code：

  <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隐藏代码，以便在js中轻松更改其属性

如何取消隐藏html标签

jsFiddle

2 个答案: