// 示例1：在事件处理函数中使用if语句
$('#myButton').on('click', function() {
    if ($(this).hasClass('active')) {
        // 如果按钮有active类，执行此代码
        $(this).removeClass('active');
    } else {
        // 否则执行此代码
        $(this).addClass('active');
    }
});

// 示例2：根据条件绑定不同的事件处理程序
var isMobile = /Mobi|Android/i.test(navigator.userAgent);

if (isMobile) {
    // 移动设备绑定触摸事件
    $('#myElement').on('touchstart', handleTouch);
} else {
    // 非移动设备绑定点击事件
    $('#myElement').on('click', handleClick);
}

// 示例3：在事件委托中使用条件判断
$('#container').on('click', '.item', function(event) {
    if ($(this).data('status') === 'active') {
        // 处理active状态的item点击
        deactivateItem($(this));
    } else {
        // 处理非active状态的item点击
        activateItem($(this));
    }
});

// 错误示例
$('#btn').on('click', function() {
    if ($(this).hasClass('active')) { // 如果类名检查不正确
        // 代码不会执行
    }
});

// 正确做法：确保DOM状态正确
$('#btn').on('click', function() {
    console.log($(this).hasClass('active')); // 先调试确认
    if ($(this).hasClass('active')) {
        // ...
    }
});

// 确保选择器匹配目标元素
$('#list').on('click', '.list-item', function() {
    if ($(this).data('type') === 'special') {
        // 处理特殊项
    }
});

// 良好的实践：将复杂逻辑封装
$('#form').on('submit', function(e) {
    if (validateForm($(this))) {
        // 表单有效，继续提交
    } else {
        e.preventDefault(); // 阻止表单提交
        showErrors();
    }
});

function validateForm($form) {
    // 复杂的验证逻辑放在单独的函数中
    return $form.find('input.required').filter(function() {
        return $(this).val().trim() === '';
    }).length === 0;
}