Question

我有一个包含5个搜索条件输入框的表单。我还要求在页面上设置“全部清除”按钮以清除输入框。

我希望“全部清除”按钮实际上是div，背景图像在输入框为空时具有灰色背景，并且当它们中包含某些内容时具有红色背景。

单击“全部清除”按钮将清除输入框。

除了在用户在搜索框中输入内容时切换到红色背景图像外，我几乎所有工作都有效。我构建了一个jsfiddle：http://jsfiddle.net/pJgyu/27896/来显示我的问题（我使用背景颜色而不是背景图像来消除不必要的东西）。

我的jsfiddle中的javascript符合我想要做的事情，看起来像这样：

function clearSearchClick() {
    $('.ui-clear').removeClass('enabled').addClass('disabled');
    $(':input').val('');
    $('.first').focus();
}

function docKeyPress(event) {
    if (event.which === 13) {
        event.preventDefault();
        alert('pretend I searched');
    }
}

function searchEmpty() {
    var valid = true;
    $(':input').each(function() {
        if ($(this).val() !== '') return false;
    });
    return valid;    
}

function inputKeyUp(event) {
    if (!searchEmpty()) {
        $('ui-clear.disabled').removeClass('disabled').addClass('enabled');
    }
}

$(function () {
    $('.first').focus();
    $('.ui-clear').click(clearSearchClick);
    $(':input').keyup(inputKeyUp);
    $(document).keypress(docKeyPress);
});

我知道关于javascript的以下内容：

.first重点工作
.ui-clear点击处理程序正常工作

当用户输入内容时，我没有将第一个搜索框左侧的黑框变为红色。对于实现这一目标的正确，有效方法的任何见解，我将不胜感激。

Answer 1

我认为你可能过于复杂了......

如果我理解正确，如果表单中的任何输入包含用户输入的文本，您希望更改div（基于应用类）的外观吗？

您还想在keyup事件而不是更改上执行此操作吗？

所以，我会做这样的事情

首先在应用于div的类中设置默认（黑色）背景

.ui-clear {
    border: thin black outset;
    height: 24px;
    width:24px;
    display: inline;
    float: left;
    background-color: black;
}

和'enabled'的课程

.enabled {
    background-color: red;
}

这真的是你需要的风格才能让这项工作

然后代码 - 再次，保持简单

$(function () {
    $('.first').focus();
    $('.search input:text').keyup(function(){
        var allCrit="";
        $('.search input:text').each(function(){
            allCrit += $(this).val();
        });
        $('.ui-clear').toggleClass("enabled", allCrit != "");         
    });
});

我们在这做什么？

捕获每个输入框的keyup事件
遍历它们并将每个val连接成一个字符串
测试字符串是否包含任何内容，如果包含，则切换启用的类

如何使用jQuery基于输入字段为空白/非空白来更改背景图像

1 个答案: