Question

我正在慢慢了解jQuery并每天学习更多知识，但我想知道我是否可以创建更清晰的代码。我听说过“链接”，但我不确定如何应用它。

下面是我编写的一个正在运行的jQuery，但是虽然它有效，但是我可以通过链接任何一个来减少它/使它变得更干净吗？

该脚本在按钮单击时删除一个类，并添加另一个类，同时隐藏另一个div。最后，我添加了keydown事件以及按钮按下。

    <script type="text/javascript">
$('button').click(function(e) {
if ($(this).hasClass('grid')) {
$('#primary ul').removeClass('stylelist').addClass('grid');
$('#primary ul .single-style-text').hide();

        }
else if($(this).hasClass('list')) {
$('#primary ul').removeClass('grid').addClass('stylelist');
$('#primary ul .single-style-text').show();
        }
    });
$(document).bind('keydown', function(e) {
   if (e.which == 71) { 
       $('#primary ul').removeClass('stylelist').addClass('grid');
        $('#primary ul .single-style-text').hide();
   }
});
$(document).bind('keydown', function(e) {
   if (e.which == 76) { 
       $('#primary ul').removeClass('grid').addClass('stylelist');
        $('#primary ul .single-style-text').show();
   }
});
</script>

Answer 1

你可以在那里进一步发展：

$('#primary ul')
    .removeClass('stylelist').addClass('grid')
    .find('.single-style-text').hide();

但是，使代码更好的一件事就是将该功能转移到一个函数中（即使这会删除一点链接）：

function switchView(view) {
    var ul=$('#primary ul');
    ul.removeClass('stylelist').removeClass('grid');
    ul.addClass(view);
    var singleStyleText=ul.find('.single-style-text');
    singleStyleText.hide();
    if(view=='stylelist') {
        singleStyleText.show();
    }
}

然后您的事件处理程序可能如下所示：

$('button').click(function() {
    if($('#primary ul').hasClass('grid')) {
        switchView('stylelist');
    }else{
        switchView('grid');
    }
    return false;
});
$(document).bind('keydown', function(e) {
    if(e.which == 71) {
        switchView('grid');
    }else if(e.which == 76) {
        switchView('stylelist');
    }
});

Answer 2

$('button').click(function(e) {
    var ul = $('#primary ul');

    if ($(this).hasClass('grid')) {
        ul.removeClass('stylelist').addClass('grid').find('.single-style-text').hide();
    } else if($(this).hasClass('list')) {
        ul.removeClass('grid').addClass('stylelist').find('.single-style-text').show();
    }

});

$(document).bind('keydown', function(e) {
    var ul = $('#primary ul');

    if (e.which == 71) { 
        ul.removeClass('stylelist').addClass('grid').find('.single-style-text').hide();
    } else if (e.which == 76) { 
        $('#primary ul').removeClass('grid').addClass('stylelist').find('.single-style-text').show();
    }
});

但是如果它只是一个列表或你要切换的网格，你可以在两行代码上写它。（每个活动），如：

$('button').click(function(e) {
    var isGrid = $(this).hasClass('grid');
    $('#primary ul').removeClass(isGrid ? 'stylelist' : 'grid').addClass(isGrid ? 'grid' : 'list').find('.single-style-text')[isGrid ? 'hide' : 'show']();
});

Answer 3

一些清理......

首先，我们可以将这两个keydown事件结合起来。实际上没有必要进行多次调用，因为您正在处理的是来自事件的值。

<script type="text/javascript">
$('button').click(function(e) {
  if($(this).hasClass('grid')) {
    $('#primary ul').removeClass('stylelist').addClass('grid');
    $('#primary ul .single-style-text').hide();
  }
  else if($(this).hasClass('list')) {
    $('#primary ul').removeClass('grid').addClass('stylelist');
    $('#primary ul .single-style-text').show();
  }
});

$(document).bind('keydown', function(e) {
   if (e.which == 71) { 
       $('#primary ul').removeClass('stylelist').addClass('grid');
        $('#primary ul .single-style-text').hide();
   }
   if (e.which == 76) { 
        $('#primary ul').removeClass('grid').addClass('stylelist');
        $('#primary ul .single-style-text').show();
   }
});
</script>

现在，你正在做很多重复的工作......如何通过将其包装在一个函数中来最小化它？

现在，我可能已经被带走了......

<script type="text/javascript">
$('button').click( swapClasses() );

$(document).bind('keydown', function(e) {
   if (e.which == 71) { 
      $('#primary ul').removeClass('stylelist').addClass('grid');
      $('#primary ul .single-style-text').hide();
   }
   else if (e.which == 76) { 
      $('#primary ul').removeClass('grid').addClass('stylelist');
      $('#primary ul .single-style-text').show();
   }
});

swapClasses = function() {
  $('#primary ul').toggleClass( 'stylelist' ).toggleClass( 'grid' );
  $('#primary ul .single-style-text').toggle( showOrHide );
}
</script>

看起来更干净......

Answer 4

就链接而言，我认为不会有很多变化。我会改变的一些事情......

你的文件在哪里？
缓存您的选择器，以便可以重复使用它们。

使用更具体的选择器。而不只是按钮指定类。

<script type="text/javascript">
 $(function(){ 
    var primary = $('#primary ul'); 
    var single_style_text = primary.find('.single-style-text'); 

    $('button.grid','button.list').click(function(e) {
        if ( $(this).hasClass('grid') ) {
            primary.removeClass('stylelist').addClass('grid');
            single_style_text.hide();

        }
        else if( $(this).hasClass('list') ) {
            primary.removeClass('grid').addClass('stylelist');
            single_style_text.show();
        }
    });

    $(document).bind('keydown', function(e) {
       if (e.which == 76) { 
            primary.removeClass('grid').addClass('stylelist');
            single_style_text.show();
       }

       if (e.which == 71) { 
           primary.removeClass('stylelist').addClass('grid');
            single_style_text.hide();
       }
    });
}) 
</script>

jQuery链接 - 我可以编写更清晰的代码吗？

4 个答案: