子どものコンテンツに基づいてdivを非表示または表示

Question

テキストエリアの内容に基づいてjqueryを使用してコンテンツを隠したり表示したりするための試行錯誤の後、に近いのスクリプトが完成しました。私はMVC 5でこれをやっていますが、このジレンマには何の影響もないと思います。

私は編集ページを持っています。このページには、多くのオプションのテキスト領域があります。これらは空でもテキストでもかまいません。私がしたいのは、テキストが含まれていない場合、デフォルトでそれらを隠すことです。それらはグループ化されており、それらの上の説明テキストをクリックするとトグル可能です。

これは私がそれらを一つの領域の表示、グループ化されてきた方法です：即時テキスト領域、Q1p1であれば

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

さて、これはうまく動作します：

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

を私は持っているスクリプトがあります私の例はそこにテキストを持っています。しかし、空であれば、他の2つのテキストエリアにテキストが含まれていても、divは表示されません。ここで私の問題は、スクリプトがすべてのdivを考慮せず、最初のスクリプトのみをチェックするということです。 .optionalArea内のすべてのテキスト領域が考慮されるように、どのように変更できますか？

Answer 1

.valだけだから、最初の1

からこのような値を取るので、あなたがつもり必要.eachだ：あなたは空白や行を持っていないことを確認できた場合は

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

3つのテキスト領域の値を組み合わせるには、.val（）の呼び出しが必要ですか？それは起こりません。 .val（）は選択された最初の要素から値を返します。なぜなら、Q1p1にテキストがあるときだけ、望ましい動作を得るからです。すべての要素を選択し、個別に.val（）を呼び出して連結する必要があります。

Answer 3

をそれが空でない場合は、単純なセレクタの一致を試みることができるテキストエリアでのみ-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