すべての子Divs - JS

Question

data-id属性とdata-parent属性値を使用して、ページの読み込み時にすべての子divs（element_wrapper）を非表示にしたいとします。私はjavascriptに新しいので、私はそれを行う方法を本当に知らない。 pageloadでそれらを隠すだけで、ボタンをクリックしてそれらを表示/非表示にしたいと思います。前もって感謝します。

SOURCEのHTML：

<div id="wrapper"> 
      <div class="element_wrapper" data-id="1" data-parent=""> 
      <input class="toggler_btn" type="button" value="+/-" data-id="1" data-parent=""> 
      Main Office 
      <input type="button" value="Add" /> 
      <input type="button" value="Edit" /> 
      <input type="button" value="Delete" /> 
     <div class="element_wrapper" data-id="3" data-parent="1"> 
      <input class="toggler_btn" type="button" value="+/-" data-id="3" data-parent="1"> 
      Room 203 
      <input type="button" value="Add" /> 
      <input type="button" value="Edit" /> 
      <input type="button" value="Delete" /> 
     <div class="element_wrapper" data-id="6" data-parent="3"> 
      <input class="toggler_btn" type="button" value="+/-" data-id="6" data-parent="3"> 
      Table 2 
      <input type="button" value="Add" /> 
      <input type="button" value="Edit" /> 
      <input type="button" value="Delete" /> 
     </div> 
     </div> 
     <div class="element_wrapper" data-id="4" data-parent="1"> 
      <input class="toggler_btn" type="button" value="+/-" data-id="4" data-parent="1"> 
      Room 256 
      <input type="button" value="Add" /> 
      <input type="button" value="Edit" /> 
      <input type="button" value="Delete" /> 
     <div class="element_wrapper" data-id="7" data-parent="4"> 
      <input class="toggler_btn" type="button" value="+/-" data-id="7" data-parent="4"> 
      Table 3 
      <input type="button" value="Add" /> 
      <input type="button" value="Edit" /> 
      <input type="button" value="Delete" /> 
     </div> 
     </div> 
     </div> 
     <div class="element_wrapper" data-id="2" data-parent=""> 
      <input class="toggler_btn" type="button" value="+/-" data-id="2" data-parent=""> 
      Not So Main Office 
      <input type="button" value="Add" /> 
      <input type="button" value="Edit" /> 
      <input type="button" value="Delete" /> 
     <div class="element_wrapper" data-id="5" data-parent="2"> 
      <input class="toggler_btn" type="button" value="+/-" data-id="5" data-parent="2"> 
      Room 301 
      <input type="button" value="Add" /> 
      <input type="button" value="Edit" /> 
      <input type="button" value="Delete" /> 
     <div class="element_wrapper" data-id="8" data-parent="5"> 
      <input class="toggler_btn" type="button" value="+/-" data-id="8" data-parent="5"> 
      Table 13 
      <input type="button" value="Add" /> 
      <input type="button" value="Edit" /> 
      <input type="button" value="Delete" /> 
     </div> 
     </div> 
     </div> 

</div> 

ページレイアウトCODE：

@model List<Tree_List.Controllers.Element> 
@{ 
    ViewBag.Title = "Index"; 
} 
<link href="~/Content/Site.css" rel="stylesheet" /> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 

@helper PopulateDivs(List<Tree_List.Controllers.Element> elements) 
{ 
    foreach (var element in elements) 
    { 
     <div class="element_wrapper" data-id="@element.ID" data-parent="@element.PARNET_ID"> 
      <input class="toggler_btn" type="button" value="+/-" data-id="@element.ID" data-parent="@element.PARNET_ID"> 
      @element.NAME 
      <input type="button" value="Add" /> 
      <input type="button" value="Edit" /> 
      <input type="button" value="Delete" /> 
      @if (element.CHILDS.Count() > 0) 
      { 
       @PopulateDivs(element.CHILDS); 
      } 
     </div> 
    } 
} 

<script> 

</script> 

<div id="wrapper"> 
    @PopulateDivs(Model) 
</div> 

Answer 1

私は右のあなたの問題を抱えてわからないんだけど、私が理解から、表示または非表示にしたいあなた+/-ボタンをクリックして追加/編集/削除します。

ロード時に要素を非表示にするには、CSSでこれを行うことができますが、javascriptでも行うことができます。 これは必要なCSSです。

.element_wrapper input{ 
    display: none; 
} 
.element_wrapper input.toggler_btn{ 
    display: block; 
} 
.element_wrapper input.active{ 
    display: block; 
} 

そして、ここでボタンの機能は次のとおりです。

$(document).ready(function(){ 
    $(document).on('click','.toggler_btn', function(){ 
     $(this).siblings('input').toggleClass('active'); 
    }); 
}) 

今度は、それがどのように動作するか見てみましょう。 toggler_buttonをクリックすると、クリックしたボタンのすべての入力兄弟が表示されます（これはHTML構造のためです）。クラスを切り替えます（入力にクラスがある場合、toggleClassは削除します。それから、私が書いたCSSを振り返る必要があります。あなたはそこに

.element_wrapper input.active{ 
     display: block; 
    } 

彼らはアクティブなクラスを持っている場合、あなたのボタンが表示されるようになるかを確認することができます。 あなたはそれを持っていますように。ご質問がある場合は、コメントを残してください。

LE：

あなたがここに私の例があります：https://jsfiddle.net/jxm2v4bv/1/?utm_source=website&utm_medium=embed&utm_campaign=jxm2v4bv