技术问询：为指定Div应用取色器颜色及实现按钮边框动态显示

嘿，我来帮你搞定这两个需求，结合你现有的jQuery代码，我给你整理了完整的实现方案：

1. 将取色器选中的颜色应用到#header、#subHeader、#button #

首先假设你有一个颜色选择器（比如<input type="color" id="colorPicker">），我们可以给它绑定事件，当用户选中颜色时，同步更新三个目标div的样式。这里默认设置背景色，如果你需要设置文字颜色，只需要调整CSS属性即可：

$(document).ready(function(){ 
    var div1 = $('#header')[0]; 
    $('#text1').bind('keyup change', function() { div1.innerHTML = this.value; }); 
    var div2 = $('#subHeader')[0]; 
    $('#text2').bind('keyup change', function() { div2.innerHTML = this.value; }); 

    // 新增：处理取色器颜色应用
    const colorPicker = $('#colorPicker');
    const targetElements = $('#header, #subHeader, #button');
    
    // 监听颜色变化事件（input实时更新，change确认后更新）
    colorPicker.on('input change', function() {
        const selectedColor = this.value;
        // 设置背景色
        targetElements.css('background-color', selectedColor);
        // 如果需要设置文字颜色，替换成下面这行：
        // targetElements.css('color', selectedColor);
    });

    // 你的其他代码...
});

2. 隐藏#button的边框直到用户在#text3中输入文本 #

我们可以先通过CSS给#button设置初始无边框，然后监听#text3的输入事件，根据输入内容是否为空来切换边框显示：

第一步：添加基础CSS样式 #

#button {
    border: none; /* 初始隐藏边框 */
    transition: border 0.3s ease; /* 可选：添加过渡动画让边框显示更平滑 */
    /* 可以补充其他默认样式，比如 padding、背景色等 */
}

第二步：在jQuery中添加输入监听逻辑 #

$(document).ready(function(){ 
    // 你的现有代码...
    var div1 = $('#header')[0]; 
    $('#text1').bind('keyup change', function() { div1.innerHTML = this.value; }); 
    var div2 = $('#subHeader')[0]; 
    $('#text2').bind('keyup change', function() { div2.innerHTML = this.value; }); 

    // 新增：处理#button边框显示逻辑
    const textInput3 = $('#text3');
    const button = $('#button');
    
    textInput3.on('keyup change', function() {
        const inputContent = $(this).val().trim(); // 去除首尾空格，避免空字符误判
        if (inputContent.length > 0) {
            // 输入内容不为空时显示边框，这里可以自定义边框样式（宽度、颜色、类型）
            button.css('border', '1px solid #333');
        } else {
            // 输入为空时隐藏边框
            button.css('border', 'none');
        }
    });

    // 你的其他代码...
});

整合后的完整代码 #

把两部分逻辑合并起来，最终的ready函数如下：

$(document).ready(function(){ 
    var div1 = $('#header')[0]; 
    $('#text1').bind('keyup change', function() { div1.innerHTML = this.value; }); 
    var div2 = $('#subHeader')[0]; 
    $('#text2').bind('keyup change', function() { div2.innerHTML = this.value; }); 

    // 取色器颜色应用逻辑
    const colorPicker = $('#colorPicker');
    const targetElements = $('#header, #subHeader, #button');
    colorPicker.on('input change', function() {
        const selectedColor = this.value;
        targetElements.css('background-color', selectedColor);
        // targetElements.css('color', selectedColor); // 若需设置文字颜色则启用此行
    });

    // #button边框显示逻辑
    const textInput3 = $('#text3');
    const button = $('#button');
    textInput3.on('keyup change', function() {
        const inputContent = $(this).val().trim();
        button.css('border', inputContent.length > 0 ? '1px solid #333' : 'none');
    });
});

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