根據孩子的內容隱藏或顯示div

經過許多解決方案的試驗和錯誤發現隱藏和顯示使用基於textarea內容的jQuery的內容我已經結束了近做我想做的一塊腳本。我在MVC 5中這樣做，雖然我不認爲這種困境會有任何後果。根據孩子的內容隱藏或顯示div

我有一個編輯頁面，其中有許多可選的文本區域，可以是空的或有一些文本，這些來自數據庫。我想要做的是默認情況下隱藏它們，如果它們不包含文本。他們被分組，並且可以通過點擊上面的描述文字來切換。

我這是怎麼讓他們分組，顯示一個區：

<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中的所有文本區域考慮在內？

來源

2017-03-31 Wubbler

你不能做到這一點的所有服務器並設置視圖模型的一些IsXSectionViewable布爾屬性，然後在如果IsXSectionViewable的剃鬚刀中的該元素上設置display：none。 – Fran

@Fran我甚至沒有想過使用剃鬚刀，我已經在網站的其他位上做了一些非常相似的事情，所以我想盡管是相當新手的，但仍然沿着jQuery路線走下去。如果在幾天內沒有合適的答案使用jquery，我會遵循你的建議。非常感謝！ – Wubbler

我想第二個服務器端的方法。基於複選框點擊顯示div很容易。您只需要使用任何邏輯來設置複選框的初始狀態，以便最初隱藏或顯示div。 –

你會需要.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 
     } 
    }); 
});

來源

2017-03-31 14:26:46 Madzgo

謝謝，這個作品完美。我爲'if（$ .trim（$（this）.val（））。length <1）'添加了一個感嘆號來反轉邏輯。非常感謝！ – Wubbler

沒問題！我錯過了驚歎號:)我會更新我的答案，以及如果有人在將來需要它 – Madzgo

您是否期待調用.val（）來合併3個文本區域的值？那不會發生。 .val（）將返回所選第一個元素的值，這就是爲什麼當Q1p1中包含文本時您只會獲得所需的行爲。您需要選擇所有元素，分別調用.val（），然後連接。

來源

2017-03-31 14:18:14

這肯定會解釋行爲。我確實試圖在腳本中加入一些技巧，但我無法提供一個可行的解決方案。雖然我覺得不需要組合或連接，但我只是簡單地選擇使用.val（）這麼多的答案，SO似乎用它來檢查空字段。 – Wubbler

如果你能確保你沒有空格或行獨上，你可以用一個簡單的選擇匹配嘗試的textareas -breaks如果它不是空：

$(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

來源

2017-03-31 14:30:57 DaniP

我在其中一次試驗中實際上有'$（「。optionalArea textarea：empty」）'，但是我沒有意識到你可以使用'不：'，對於瞭解謝謝你非常有幫助！去顯示我真的應該深入一些JavaScript的基礎知識。 – Wubbler

很高興能幫助我多一點@Joonas唯一的關於這就是我提到的空白或斷裂線，這是第二種解決方案的優勢，以及您實際上擁有「trim」 – DaniP

根據孩子的內容隱藏或顯示div

回答

相關問題