2013-05-29 105 views
0

嘿所以我试图为点击事件创建自定义切换jQuery函数。基于DIV ID的jQuery切换功能

的HTML结构是这样的:

//These are the clickable boxes, CSS is taking care of the div's as squares// 
<div class="span_2" data-col-name="hid_1">1</div> 
<div class="span_2" data-col-name="hid_2">2</div> 
<div class="span_2" data-col-name="hid_3">3</div> 

//Hidden div's (through class style display:none;) boxes that correspond to the clickable boxes above// 
<div class="toggle_col" id="hid_1">Hi</div> 
<div class="toggle_col" id="hid_2">Mello</div> 
<div class="toggle_col" id="hid_3">Rock</div> 

//jQuery to make hidden div boxes toggle 
$('.span_2 > div').click(function() { 

      var $colToShow = $(this).attr('data-col-name'); 
      $('#' + $colToShow).toggleClass('toggle_col'); 
     }); 

所有这一切工作。一旦类被删除,隐藏的框切换可见,因为它们相应的div盒被点击。但是我想补充的是,当点击事件发生在另一个可点击的div盒子上时,原来可见的盒子将会变得不可见,新的可见div将占用它的空间。这是我试图做的:

//jQuery adapted from the code before// 
$('.span_2 > div').click(function() { 
      var group = $('div[id^="hid"]'); //Create an array of hidden div boxes using the id// 
      if(i=0;i<group.length;i++){ //Progress through each div and check to see if it's not hidden by the class// 
       if(!group[i].hasClass('toggle_col')){ //It if isn't hidden make it hidden by toggling class// 
        group[i].toggleClass('toggle_col'); 
       } 
      } 


      var $colToShow = $(this).attr('data-col-name'); 
      $('#' + $colToShow).toggleClass('toggle_col');//Now make corresponding hidden div based on clickable box div appear// 
     }); 

你能帮我吗?

+0

是'$( 'span_2> DIV。') “对吗?” 'span_2' divs中没有后代div – jammykam

+0

它只是一段代码,所以它确实有后代。我只是没有包括他们,因为他们与我正在尝试做的事无关。 – OntheRise

回答

0

你在哪里关闭...试试这个..

$('.span_2 > div').click(function() { 
      // add the toggle_col class to all of the elements with 
      // an id starting with hid_ if they have a common parent then you can 
      // add that as part of the selector to scope the behavior a little better 

      $('div[id^=hid_]').addClass('toggle_col'); 
      var $colToShow = $(this).attr('data-col-name'); 
      $('#' + $colToShow).toggleClass('toggle_col'); 
}); 
+0

是的,工作。我肯定采取了艰难的方式围绕这个哈哈。感谢您的洞察! – OntheRise

0

为什么不只是隐藏所有div的第一个,然后显示相应的点击div?而不是切换类,只要使用show()方法来显示隐藏的div:

//These are the clickable boxes, CSS is taking care of the div's as squares// 
<div class="span_2" data-col-name="hid_1">1</div> 
<div class="span_2" data-col-name="hid_2">2</div> 
<div class="span_2" data-col-name="hid_3">3</div> 

//Hidden div's (through class style display:none;) boxes that correspond to the clickable boxes above// 
<div class="toggle_col" id="hid_1">Hi</div> 
<div class="toggle_col" id="hid_2">Mello</div> 
<div class="toggle_col" id="hid_3">Rock</div> 

//jQuery to make hidden div boxes toggle 
$('.span_2 > div').click(function() { 

    $('.toggle_col').hide(); 
    var $colToShow = $(this).attr('data-col-name'); 
    $('#' + $colToShow).show(); 
});