在.each（）中使用.blur（）

Question

我正在听取一些关于这是否可以执行的建议。我有一个脚本来检查地址的Lat / Lng。如果字段中没有任何内容，则会突出显示具有地址类别的字段。

我正在寻找的是当信息输入到每个字段并且然后失去焦点时，将删除空字段的样式并将其恢复为常规样式。

我面临的问题是我无法让它发挥作用。我已经看过Firebug，看看它是否正在抛出并出现错误，但事实并非如此。我已经浏览了网络并在这里，但似乎没有任何东西符合我的确切问题。

我的代码如下：

if($('#latlngaddress').val().length == 0)
{
    $('#error').slideDown();
    $('#error').html('');
    $('#error').append('Sorry, you need to enter an address');
    $('#lat').val('');
    $('#lng').val('');
    $('.address').each(function()
    {
        var add = $(this);
        add.css('border', '1px solid #C33');
        add.css('background-color', '#F6CBCA');
    });
}

如果这些字段有信息，那么显然它会转到else子句，这就是我在那里的内容：

else
{
    $('.address').each(function()
    {
        var add = $(this);
        add.blur(function()
        {
            add.css('border', '1px solid #000');
            add.css('background-color', '#FFF');
        });
    });
}

我尝试过.blur（）的几种方法。我做了$（this）.blur（）我也试过$（'。address。'）。blur（）

问题是焦点丢失后它不会改变字段样式。

现在，当我取出blur（）函数时，它可以完美地工作（显然当所有字段都被填充时）。

我的表单字段如下：

<input name="address1" id="address1" class="address" type="text" tabindex="4" />
<input name="address2" id="address2" type="text" tabindex="5" />
<input name="town" id="town" class="address" type="text" tabindex="6"  />
<input name="county" id="county" class="address" type="text" tabindex="7"  />
<input name="postcode" id="postcode" class="address" type="text" tabindex="8"  />
<input name="country" id="country" type="text" tabindex="9" class="required address"/>
<input type='button' id="getll" value='Get Lat/Lon'>

我不确定是否可以这样做。就像我说的那样，只是寻找一些建议。

Answer 1

更新

根据您的评论，您似乎想要这样的内容，只需根据值的存在/不存在检查模糊字段和颜色的val()：

JSFiddle http://jsfiddle.net/ULaUm/5/

// Set initial state
$('.address').css({
    'border': '1px solid #C33',
        'background-color': '#F6CBCA'
});

$('.address').blur(function () {
    var $this = $(this);
    if ($this.val() == "") {
        $this.css({
            'border': '1px solid #C33',
                'background-color': '#F6CBCA'
        });
    } else {
        $this.css({
            'border': '1px solid #000',
                'background-color': '#FFF'
        });
    }
});

如果这不是你想要的，请详细解释一下你会发生什么。

先前的注释：

基本上var add = $(this)值在blur回调中已过时（当模糊事件触发时，它具有最后一次each调用的值。它不会创建一个名为{的局部变量{1}}在每次调用的每次迭代中，只有一个变量在该范围内被重复声明。

如果要对所有匹配项应用相同的东西，则不需要在jQuery中使用add。只需将各种blur / css调用应用于jQuery集合。

JSFiddle玩：http://jsfiddle.net/ULaUm/

each()

注意：此代码不是最佳的（太多重复），但只是为了给你一些比使用$('#error').slideDown(); $('#error').html(''); $('#error').append('Sorry, you need to enter an address'); $('#lat').val(''); $('#lng').val(''); $('.address').css('border', '1px solid #C33').css('background-color', '#F6CBCA'); $('.address').blur(function () { $(this).css('border', '1px solid #000'); $(this).css('background-color', '#FFF'); }); 更简单的东西

更紧凑的版本为多个CSS属性使用对象表示法：

each

你甚至可以将它们连在一起：

$('.address').css({'border': '1px solid #C33', 'background-color':  '#F6CBCA'});

$('.address').blur(function () {
    $(this).css({'border': '1px solid #000', 'background-color': '#FFF'});
});

正如reyaner建议的那样，你应该使用类更改并让样式表来处理外观。

Answer 2

也许这会有所帮助：

//form or some parent container
$('form').on('blur', '.address', function(){
    $(this).addClass("doTheStylingHereClass"); //its just smarter to it it like this
});

.doTheStylingHereClass {
    border: 1px solid #000;
    background-color: #fff;
}