Question

我有特别的CSS通过它隐藏图像。现在我想开发jquery，如果特定字段在模糊上是空白的，那么应该显示类错误的图像。

.error{
display:none;
}


<tr>
    <th width="30%">Email:</th>
    <td width="63%"><input type="text" name="email" id="email" title="Email*" class="validate"/></td>
    <td width="05%"><img width="27" height="27" id="erroremail" src="images/error.png" alt="Error" title="N/A*" class="error"></td>
</tr>..

我为此开发jquery是

$('.validate').blur(function() {
    if ($(this).val() == '') {

        $(this).next('.error').show().css({'display':'block'});
                alert("null");

    } else {

        $(this).next('.error').hide();
        alert("not null");
        }
});

虽然我在控制台上没有收到任何错误。甚至警报也在运行，但jquery不起作用。

Answer 1

您的代码找不到正确的元素。试试这个：

$('.validate').blur(function() {
    if ($(this).val() == '') {

        $(this).closest('tr').find('.error').show();
                alert("null");

    } else {

        $(this).closest('tr').find('.error').hide();
        alert("not null");
        }
});

代码：http://jsfiddle.net/6dWFs/

Answer 2

next()没有任何意义，因为你在桌子里。首先选择父单元格，然后选择.error元素：

$(this).parents('td:first').next().find('.error')

最终代码：

$('.validate').blur(function() {
    var errorImg = $(this).parents('td:first').next().find('.error');
    if ($(this).val() == '') {
        errorImg.show().css({'display':'block'});
                alert("null");
    } else {
        errorImg.hide();
        alert("not null");
    }
});

Answer 3

next()返回紧随其后的兄弟。

在你的情况下，.validate元素没有兄弟姐妹，而是你想要定位的elamenet在下一个表格单元格中。

您必须使用$('.error', $(this).parent().next())来获取.error元素。

1）$(this).parent() - 返回父td元素 2）next()返回下一个td单元格 3）$(".validate", $(this).parent().next())返回具有validate类的所有元素，这些元素是$(this).parent().next()的子元素。

$('.validate').blur(function() {     
    if ($(this).val() == '') {          
        $('.error', $(this).parent().next()).show();
        alert("null");      
    } else {          
        $('.error', $(this).parent().next()).hide();
        alert("not null");         
    } 
});

使用jquery更改图像属性

3 个答案: