1

我有一个表格，上面有 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的以下内容：

  1. 重点.first工作
  2. 点击.ui-clear处理程序有效

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

4

1 回答 1

1

我认为你可能过于复杂的事情......

如果我理解正确，如果表单中的任何输入包含用户输入的文本，您是否希望 div 的外观（基于应用的类）发生变化？

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

所以，我会做这样的事情

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

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

和一个“启用”的类

.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 != "");         
    });
});

我们在这里做什么？

  1. 捕获每个输入框的 keyup 事件
  2. 遍历它们并将每个 val 连接成一个字符串
  3. 测试字符串是否包含任何内容，如果包含，则切换启用的类
于 2013-02-06T04:49:22.260 回答