Question

在SO上发现许多解决方案的试验和错误，使用基于textarea内容的jquery隐藏和显示内容后，我最终得到了一块几乎做我想要的脚本。我在MVC 5中这样做，虽然我不认为这种困境有任何后果。

我有一个编辑页面，其中有许多可选的文本区域，可以是空的或有一些文本，这些文本区域来自数据库。我想要做的是默认隐藏它们，如果它们不包含文本。它们被分组，只需单击上面的描述文本即可进行切换。

这是我将它们分组的方式，显示一个区域：

    <div class="togglerDesc">
    <p class="pointerToggler"><strong>XXX description</strong></p>
        <div class="hiddenContainer">
            <div class="optionalArea">
                <div class="form-group">
                    @Html.LabelFor(model => model.Q1p1, htmlAttributes: new { @class = "control-label col-md-1" })
                    <div class="col-md-10">
                        @Html.TextAreaFor(model => model.Q1p1, new { @class = "form-control", @rows = "2", @style = "width:90%;max-width:100%;" })
                        @Html.ValidationMessageFor(model => model.Q1p1, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Q1p2, htmlAttributes: new { @class = "control-label col-md-1" })
                    <div class="col-md-10">
                        @Html.TextAreaFor(model => model.Q1p2, new { @class = "form-control", @rows = "2", @style = "width:90%;max-width:100%;" })
                        @Html.ValidationMessageFor(model => model.Q1p2, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Q1p3, htmlAttributes: new { @class = "control-label col-md-1" })
                    <div class="col-md-10">
                        @Html.TextAreaFor(model => model.Q1p3, new { @class = "form-control", @rows = "2", @style = "width:90%;max-width:100%;" })
                        @Html.ValidationMessageFor(model => model.Q1p3, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        </div>
    </div>

我的脚本是：

$(document).ready(function () {
        if (!$.trim($(".optionalArea textarea").val()).length < 1) {
            $(".optionalArea textarea").parents(".hiddenContainer").show();
        } 
});

现在，如果我的示例中的直接文本区域Q1p1中包含文本，则此工作正常。但是如果它是空的，即使其他两个textareas中有文本，它也不会显示div。看来我的问题似乎是脚本没有考虑所有的div，只检查第一个。我如何更改它以便将.optionalArea中的所有文本区域考虑在内？

Answer 1

您是否期望调用.val（）来合并3个文本区域的值？这不会发生。 .val（）将返回所选第一个元素的值，这就是为什么当Q1p1中包含文本时，您只能获得所需的行为。您需要选择所有元素，分别对它们调用.val（），然后连接。

Answer 2

您需要.each，因为.val只接受第一个值

这样的事情：

$(document).ready(function () {
    $(".optionalArea textarea").each(function(){ // loops through all elements selected
        if (!$.trim($(this).val()).length < 1) {
             $(this).parents(".hiddenContainer").show();
             return false; // this breaks the loop as soon as 1 textarea has value
        }
    });
});

Answer 3

如果您可以确保在textareas上没有单独的空格或换行符，则可以尝试使用简单的选择器匹配，如果它不是空的：

$(document).ready(function () {
  $(".optionalArea textarea:not(:empty)").parents('.hiddenContainer').show()
});

Fiddle Demo

_{注意：空格或换行符会将元素视为内容。}

使用您的实际代码，您可以执行以下操作来评估是否有任何内容包含以下内容：

$(document).ready(function () {
  $(".optionalArea textarea").filter(function(){
        return $.trim($(this).val())
  }).parents('.hiddenContainer').show()
});

Fiddle Demo

根据儿童的内容隐藏或显示div

3 个答案: