Question

任何人都可以知道如何减少代码重复和优化这个j查询代码。其中包含不同块上特定点击事件的相同功能。

 $('#lr-btn').on('click',function(){
            $('.lr-list').toggle();
        });
        $('#lt-btn').on('click',function(){
            $('.lt-list').toggle();
        });
        $('.lr-list ul li').on('click',function(){
            var a  =  $(this).find('span').html();
            $('.lr-list ul  input[type=radio]').removeAttr('checked');
            $(this).find('input[name=leave_reason]').prop('checked', 'checked');
            if(a == 'Other') {
                $('.leave-reason').show();
            }else{
                $('.leave-reason').hide();
            }
            $('.lr-list').hide();
            $('#lr-btn').html(a);
        });

        $('.lt-list ul li').on('click',function(){
            var a  =  $(this).find('span').html();
            $('.lt-list ul  input[type=radio]').removeAttr('checked');
            $(this).find('input[name=leave_type]').prop('checked', 'checked');
            $('.lt-list').hide();
            $('#lt-btn').html(a);
        });

Answer 1

我无法测试它以确保一切都按预期工作而没有你的HTMl，但这应该得到你想要的。 The Ternary Operator可以大大减少您的代码，但要小心，因为它也可能使您的代码在某些情况下更难理解：

 $('.btns').on('click', function() { // give both buttons class="btns" and give them data-target=".lr-list" and data-target=".lt-list" respectively
     $($(this).data('target')).toggle();
 });
 $('.lr-list ul li, .lt-list ul li').on('click', function() {
   var $this=$(this);
   var a = $this.find('span').html();
   $this.closest('ul').find('input[type="radio"]').removeAttr('checked');
   var type= $this.closest('.lr-list').length > 0 ? 'lr' : 'lt';
   var inputName= type == 'lr' ? 'leave_reason' : 'leave_type';
   $this.find('input[name="'+inputName+'"]').prop('checked', 'checked');
   type=='lr' && a == 'Other' ? $('.leave-reason').show() : $('.leave-reason').hide(); 
   $('.'+type+'-list').hide();
   $('#'+type+'-btn').html(a);
});

如何优化这个特定的jquery代码？

1 个答案: