实现TextBox间点击按钮的数据互转功能，咨询Dojo特性及JS思路

嘿，这个需求其实挺常见的，不管用Dojo还是原生JS都能轻松实现，我给你拆解下两种方案：

Dojo 实现方案 #

Dojo本身提供了完善的DOM操作、事件绑定API和Widget体系，能让你优雅地封装这个交互逻辑。下面是基于Dojo 1.x的实现示例（Dojo 2+思路类似，仅模块导入方式有区别）：

1. HTML基础结构 #

<div id="textBox1" class="container" style="border:1px solid #ccc; padding:10px; margin:10px;"></div>
<div id="textBox2" class="container" style="border:1px solid #ccc; padding:10px; margin:10px;"></div>

2. Dojo核心逻辑代码 #

require([
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/on",
    "dojo/domReady!"
], function(dom, domConstruct, on) {
    // 初始化待转移的按钮数据
    const initialItems = ["项目A", "项目B", "项目C"];
    
    // 向TextBox1添加带✓标识的按钮
    function addToTextBox1(itemText) {
        const button = domConstruct.create("button", {
            innerHTML: `${itemText} <span>✓</span>`,
            className: "tick-btn"
        }, dom.byId("textBox1"));
        
        on(button, "click", function() {
            // 点击后销毁当前按钮，转移到TextBox2并换成×标识
            domConstruct.destroy(button);
            addToTextBox2(itemText);
        });
    }
    
    // 向TextBox2添加带×标识的按钮
    function addToTextBox2(itemText) {
        const button = domConstruct.create("button", {
            innerHTML: `${itemText} <span>×</span>`,
            className: "x-btn"
        }, dom.byId("textBox2"));
        
        on(button, "click", function() {
            // 点击后销毁当前按钮，转移回TextBox1并换成✓标识
            domConstruct.destroy(button);
            addToTextBox1(itemText);
        });
    }
    
    // 初始化加载数据
    initialItems.forEach(item => addToTextBox1(item));
});

3. 可选样式优化 #

.tick-btn, .x-btn {
    margin: 5px;
    padding: 4px 8px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}
.tick-btn span {
    color: #2ecc71;
    margin-left: 4px;
}
.x-btn span {
    color: #e74c3c;
    margin-left: 4px;
}

Dojo的优势在于其跨浏览器兼容性、模块化架构，如果你已经在使用Dojo技术栈，这套方案能完美融入现有项目。

原生JavaScript实现方案 #

如果不想依赖Dojo，原生JS也能快速实现相同功能，逻辑和上面一致但更轻量：

1. 完整代码示例 #

<div id="textBox1" class="container" style="border:1px solid #ccc; padding:10px; margin:10px;"></div>
<div id="textBox2" class="container" style="border:1px solid #ccc; padding:10px; margin:10px;"></div>

<script>
    const textBox1 = document.getElementById('textBox1');
    const textBox2 = document.getElementById('textBox2');
    const initialItems = ["项目A", "项目B", "项目C"];

    // 通用按钮创建函数
    function createButton(text, isTickBtn) {
        const btn = document.createElement('button');
        btn.className = isTickBtn ? 'tick-btn' : 'x-btn';
        btn.innerHTML = `${text} <span>${isTickBtn ? '✓' : '×'}</span>`;
        
        btn.addEventListener('click', function() {
            this.remove();
            // 根据按钮类型决定转移方向
            if (isTickBtn) {
                textBox2.appendChild(createButton(text, false));
            } else {
                textBox1.appendChild(createButton(text, true));
            }
        });
        
        return btn;
    }

    // 初始化加载数据到TextBox1
    initialItems.forEach(item => {
        textBox1.appendChild(createButton(item, true));
    });
</script>

<style>
    .tick-btn, .x-btn {
        margin: 5px;
        padding: 4px 8px;
        cursor: pointer;
        border: none;
        border-radius: 4px;
    }
    .tick-btn span {
        color: #2ecc71;
        margin-left: 4px;
    }
    .x-btn span {
        color: #e74c3c;
        margin-left: 4px;
    }
</style>

这个方案无需任何外部依赖，适合小型项目或者不想引入框架的场景。

内容的提问来源于stack exchange，提问作者SanTosh YaDav