Question

我有一些最初隐藏在页面上的表单。当用户单击页面上的特定链接时，相应的表单将使用jQuery slideToggle显示。我现在这样做的方式似乎是有价值的，必须有一个更简洁的方式来做到这一点。任何人都可以帮助我提高效率，即减少代码，最佳实践等吗？

    // Show & Hide the forms on the "We need your help" page
        jQuery('.contribute-form').hide();
        jQuery('.translate-form').hide();
        // Contribute Form
        jQuery('.contribute').on('click', function(){
            if(jQuery('.translate-form').css('display', 'block')){
                jQuery('.translate-form').slideToggle('slow');
                jQuery('.contribute-form').slideToggle('slow');
            } else if(jQuery('.donate-form').css('display', 'block')){
                jQuery('.donation-form').slideToggle('slow');
                jQuery('.contribute-form').slideToggle('slow');
            } else {
                jQuery('.contribute-form').slideToggle('slow');
            }
        });
        // Translate Form
        jQuery('.translate').on('click', function(){
            if(jQuery('.donate-form').css('display', 'block')){
                jQuery('.donate-form').slideToggle('slow');
                jQuery('.translate-form').slideToggle('slow');
            } else if(jQuery('.contribute-form').css('display', 'block')){
                jQuery('.contribute-form').slideToggle('slow');
                jQuery('.translate-form').slideToggle('slow');
            } else {
                jQuery('.translate-form').slideToggle('slow');
            }
        });
       // Donate Form
        jQuery('.donate').on('click', function(){
            if(jQuery('.translate-form').css('display', 'block')){
                jQuery('.translate-form').slideToggle('slow');
                jQuery('.donate-form').slideToggle('slow');
            } else if(jQuery('.contribute-form').css('display', 'block')){
                jQuery('.contribute-form').slideToggle('slow');
                jQuery('.donate-form').slideToggle('slow');
            } else {
                jQuery('.donate-form').slideToggle('slow');
            }
        });

Answer 1

首先，使用美元别名来获得更干净的代码。然后，在单个语句中组合选择器。最后，将is()方法与:visible一起使用，而不是摆弄CSS。

jQuery(function($) {
    $('.contribute').on('click', function(){
        if ( $('.translate-form').is(':visible') ) {
            $('.translate-form, .contribute-form').slideToggle('slow');
        } else if ( $('.donate-form').is(':visible') ) {
            $('.donation-form, .contribute-form').slideToggle('slow');
        } else {
            $('.contribute-form').slideToggle('slow');
        }
    });
});

我确信您的逻辑可以使用类和DOM遍历进一步简化。如果您想将代码放在http://jsfiddle.net的演示中，我们可以提供更多建议。

带有多个slideToggle的jQuery

1 个答案: