如何将多个jquery函数合并为一个函数？

将多个jQuery函数合并为一个函数可以提高代码的可读性和维护性。以下是一个示例，展示了如何将多个jQuery函数合并为一个函数。

原始代码

假设我们有以下多个jQuery函数：

$(document).ready(function() {
    $('#button1').click(function() {
        $('#element1').fadeIn();
    });

    $('#button2').click(function() {
        $('#element2').fadeOut();
    });

    $('#button3').click(function() {
        $('#element3').slideToggle();
    });
});

合并后的代码

我们可以将这些函数合并为一个函数，如下所示：

$(document).ready(function() {
    function handleButtonClick(event) {
        const targetElement = $(event.target).attr('id').replace('button', 'element');
        const action = $(event.target).attr('id').split('button')[1];

        switch (action) {
            case '1':
                $('#' + targetElement).fadeIn();
                break;
            case '2':
                $('#' + targetElement).fadeOut();
                break;
            case '3':
                $('#' + targetElement).slideToggle();
                break;
            default:
                console.log('Unknown action');
        }
    }

    $('#button1, #button2, #button3').click(handleButtonClick);
});