点击同一glyphicon类对应的元素能否在两个功能间切换？

DevOps 小满

2026-9-25

实现方案

完全可以实现，核心思路是通过状态标记区分当前点击对应的逻辑，推荐使用元素自身的data属性存储状态，避免全局变量污染，多实例场景下也不会冲突。

方案1：通过data属性标记状态（推荐）

可以同步切换图标样式给用户明确的状态提示，代码示例如下：

$(document).on('click', '.tgt-edit', function rearrange() {
    // 获取当前编辑状态，默认未激活
    const isEditActive = $(this).data('edit-active') ?? false;

    if (!isEditActive) {
        // 启用编辑功能
        $('#align-src-col').sortable(sortableOptionsSrc);
        // 切换为确认图标，修改提示文字
        $(this).removeClass('glyphicon-pencil').addClass('glyphicon-ok');
        $(this).attr('title', '完成编辑');
        // 更新状态标记
        $(this).data('edit-active', true);
    } else {
        // 禁用编辑功能
        $('#align-src-col').sortable('destroy');
        // 此处添加你需要启用的另一功能逻辑
        // 切回铅笔图标
        $(this).removeClass('glyphicon-ok').addClass('glyphicon-pencil');
        $(this).attr('title', '编辑');
        // 更新状态标记
        $(this).data('edit-active', false);
    }
    return false;
});

方案2：通过类名切换判断状态

如果不需要修改图标，也可以通过新增类名来标记状态：

$(document).on('click', '.tgt-edit', function rearrange() {
    if (!$(this).hasClass('edit-active')) {
        // 启用编辑逻辑
        $('#align-src-col').sortable(sortableOptionsSrc);
        $(this).addClass('edit-active').attr('title', '完成编辑');
    } else {
        // 禁用编辑+执行其他功能逻辑
        $('#align-src-col').sortable('destroy');
        // 此处添加另一功能的代码
        $(this).removeClass('edit-active').attr('title', '编辑');
    }
    return false;
});