javascript - 更简洁的jquery，用于控制同一div的可见性的多按钮

Question

我有 3 个按钮来控制 1 个 div 的可见性。

我们要对 div 做以下操作：

• 显示第一次单击三个按钮中的任何一个
• 显示单击的按钮是否与先前单击的按钮不同
• 如果单击的按钮与上一次单击的按钮相同并且 div 当前可见，则隐藏
• 显示单击的按钮是否与先前单击的按钮相同，以及 div 当前是否不可见

目前我有这个：

//$('#alert_area') = target div

$button = $('.button')

if ($button.attr('id') != $('#alert_area').attr('showing')){
    $('#alert_area').show()
}else{
    if ($('#alert_area').is(":visible")){
        $('#alert_area').hide(); 
    }else{
        $('#alert_area').show(); 
    }
}
$('#alert_area').attr('showing', $button.attr('id'))

Answer 1

这只是一个轻微的改进，但您可以将您的else块替换为toggle. 你也可以缓存你的选择器来整理东西。

 var $button = $('.button'), $alertArea = $("#alert_area");

 if ($button.attr('id') != $alertArea.attr('showing')) {
     $alertArea.show()
 } else {
     $alertArea.toggle();
 }

 $alertArea.attr('showing', $button.attr('id'));