2017-04-23 149 views
0

我想要使用data-id和data-parent属性值隐藏页面加载中元素的所有子元素(element_wrapper)。我是新来的JavaScript,所以我不知道该怎么做。只要将它们隐藏在页面载入中,然后我想通过单击按钮来显示/隐藏它们。提前致谢。隐藏/显示所有子Divs - JS

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> 

的页面布局代码:

@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> 
+0

请发表您呈现的HTML,不是你的视图代码。这看起来像剃刀,所以不应该很难做到。 –

+0

@Nathaniel Flick发表评论html – SonOfAGun

+0

'$('#wrapper> .element_wrapper')。hide();'? –

回答

0

我不知道我得到了你的问题所在,但是从我的理解要显示或隐藏点击+/-按钮添加/编辑/删除。

为了隐藏载入的元素,你可以通过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