12-问题

5.3.1　问题

你需要在页面加载时隐藏、显示或者操纵一些DOM元素，之后在响应一些不同事件时也需要采取同样的措施：

$(document).ready( function() {
　　 // 在启动时设置可见性
　　 $('#state').toggle( $('#country').val() == 'US' );
　　 $('#province').toggle( $('#country').val() == 'CA' );
　　 // 通过鼠标修改国家选择器时更新可见性
　　 $('#country').change( function() {
　　　　　$('#state').toggle( $(this).val() == 'US' );
　　　　　$('#province').toggle( $(this).val() == 'CA' );
　　 });
　　 //通过键盘修改国家选择器时也要更新
　　 $('#country').keyup( function() {
　　　　　$('#state').toggle( $(this).val() == 'US' );
　　　　　$('#province').toggle( $(this).val() == 'CA' );
　　 });
});

上述代码可以正常工作，但是你希望简化它，省略过多的重复代码。

注意

为什么既要处理 change 事件又要处理 keyup 事件？许多网站只处理选择列表的 change 事件，如果用鼠标进行选择，这就能够正常工作，但是如果单击选择列表，然后用上下光标键选择选项，就什么也不会发生：在列表中按键不会触发 change 事件。如果也处理 keyup 事件，选择列表就能响应光标键，为键盘用户提供更好的体验。