如何优化这个jQuery代码？

Question

根据另一个下拉列表的选定值，修改了一些有关设置下拉列表可见性的代码。

此代码用于页面加载：

     $(document).ready(function() {
            if ($("#<%=ddlCoverage.ClientID %>").val()  == 'Basic') {
                $('#CoverageType').show();
            }
            else{
                $('#CoverageType').hide();
            }
        });

这是我用来更改下拉列表的另一部分。

$("#<%=ddlCoverage.ClientID%>").change(function() {
                $('#CoverageType')[($(this).val() == 'Basic') ? 'show' : 'hide']()
            });

有没有更好的方法来写这个？

Answer 1

http://api.jquery.com/toggle/

$('#CoverageType').toggle($("#<%=ddlCoverage.ClientID %>").val()  == 'Basic'); //true or false

Answer 2

如果您想根据下拉菜单的选择来切换元素的可见性，您还需要稍微更改其余代码：

$(function()
{
  $("#<%=ddlCoverage.ClientID %>").change(function()
  {
    $('#CoverageType').toggle($(this).val()  == 'Basic');
  });
});

这样，每次下拉菜单的值改变时都会触发，而不是在页面加载时触发。如果你只是在页面加载时想要它，你为什么不在你的ASP / PHP而不是JavaScript中以编程方式设置它呢？

Answer 3

它不一定是优化的（尽管它也不慢），但这是我写它的方式：

( function( ddlCoverageClientID )
{
  $( function()
  {
    $( '#CoverageType' ).toggle( $( '#' + ddlCoverageClientID ).val() === 'Basic'  );
  } );
}( '<%=ddlCoverage.ClientID %>' ) );

1. 我更喜欢通过IIFE注入动态服务器端语言，以便让我的JS更容易阅读（无论如何）
2. 我更喜欢$( function(){} );
的$( document ).ready( function(){} );快捷方式
3. 我更喜欢用BOOL切换而不是检查BOOL，然后调用show或hide

修改

我会修改 Francois Deschenes 的优秀代码。请注意，我会缓存$( '#CoverageType' )的返回值，而不是每次选择更改时都运行它。

( function( ddlCoverageClientID )
{
  $( function()
  {
    var $CoverageType = $( '#CoverageType' );

    $( '#' + ddlCoverageClientID ).change( function()
    {
      $CoverageType.toggle( $( this ).val() === 'Basic' );
    } );
  } );  
}( '<%=ddlCoverage.ClientID %>' ) );