我在做什么:我有三个DIV,每个DIV都作为一个按钮来交换一个具有不同内容的div。
[BOX_1] [BOX_2] [BOX_3] [-------- BOX_4 ------------]
例如: 如果您单击BOX_1,它会将BOX_4与BOX_1_CONTENT& (再次单击BOX_1将其返回到BOX_4) 如果单击BOX_2,它会将BOX_4与BOX_2_CONTENT& (再次单击BOX_2将其返回到BOX_4) 如果单击BOX_3,它会将BOX_4与BOX_3_CONTENT&交换掉。 (再次单击BOX_3将其返回到BOX_4)
BOX_1_CONTENT,BOX_2_CONTENT和BOX_3_CONTENT都设置为display:none;并在点击后显示。
有效: 如果你只是来回切换(即通过来回点击BOX_1切换内容),它的效果很好。
我的问题: 我在处理单击BOX_1时遇到问题,然后在切换回来之前,单击BOX_2或BOX_3。
我似乎需要一种处理方案的方法,例如:点击BOX_1(用BOX_1_CONTENT交换BOX_4)然后立即点击BOX_3并让它与BOX_3_CONTENT交换BOX_1_CONTENT。
有关更好方法的任何建议吗?
<script>
$(document).ready(function(){
$(".BOX_1").click(function()
{
$('.BOX_4, .BOX_1_CONTENT').fadeToggle("slow");
});
$(".BOX_2").click(function()
{
$('.BOX_4, .BOX_2_CONTENT').fadeToggle("slow");
});
$(".BOX_3").click(function()
{
$('.BOX_4, .BOX_3_CONTENT').fadeToggle("slow");
});
});
</script>
答案 0 :(得分:1)
这就是你要找的东西:
HTML:
<div class="BOX_1">BOX 1</div>
<div class="BOX_2">
BOX 2
</div>
<div class="BOX_3">
BOX 3
</div>
<!-- data-content is to check do we have content or which boxes's content do we hv now -->
<div class="BOX_4" data-content="">BOX 4 (CONTENT TO BE REPLACED)</div>
<div class="BOX_1_CONTENT">CONTENT FOR BOX 1</div>
<div class="BOX_2_CONTENT">CONTENT FOR BOX 2</div>
<div class="BOX_3_CONTENT">CONTENT FOR BOX 3</div>
JS:
$(document).ready(function(){
var b4c = $('.BOX_4').html(); // content of box 4 so that we cn refer to it later
$(".BOX_1,.BOX_2,.BOX_3").click(function()
{
var active_content = $(".BOX_4").data('content');
var cls = $(this).attr('class');
if(active_content == '')
{
$(".BOX_4").html($("."+cls+'_CONTENT').html())
$(".BOX_4").data('content',cls);
}
else
{
if(active_content == cls)
{
$('.BOX_4').html(b4c).data('content','');
}
else
{
$(".BOX_4").html($("."+cls+'_CONTENT').html())
$(".BOX_4").data('content',cls);
}
}
});
});