基于 DIV ID 的 jQuery 切换函数答案

【问题标题】：jQuery Toggle Function based on DIV IDs基于 DIV ID 的 jQuery 切换函数
【发布时间】：2013-05-29 03:56:37
【问题描述】：

嘿，所以我正在尝试为单击事件创建自定义切换 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//
       });

你能帮帮我吗？

【问题讨论】：

$('.span_2 > div') 正确吗？ span_2 div 中没有后代 div
这只是一段代码，所以它确实有后代。我只是没有包括它们，因为它们与我想要做的事情无关。

标签： jquery

【解决方案1】：

你离得近...试试这个..

$('.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');
});

【讨论】：

是的，行得通。我肯定采取了艰难的方式来解决这个问题。感谢您的洞察力！

【解决方案2】：

为什么不先隐藏所有的 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();
});

【讨论】：