嘿所以我正在尝试为点击事件创建自定义切换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 :(得分: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();
});
答案 1 :(得分: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');
});