我正在做什么:我有三个 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_4 与 BOX_1_CONTENT 交换),然后立即点击 BOX_3 并将 BOX_1_CONTENT 与 BOX_3_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>
最佳答案
这就是您要找的吗:
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);
}
}
});
});
关于javascript - 将三个 div 与一个 div 切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44575139/