jqueryを使用して画像のプロパティを変更します。

Question

私は画像を隠す特定のCSSを持っています。私はないですけれども、今、私は

.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を開発したいと私はこのための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

next()は直後の兄弟を返します。

あなたのケースでは.validate要素には兄弟が存在しない、代わりにあなたがターゲットにしたいelamenetは、次の表のセルです。

あなたは.error要素のホールドを取得するために$('.error', $(this).parent().next())を使用する必要があります。

1）$(this).parent() - 親td要素を返します。
2）next()は、次のtdセルを返します。
3）$(".validate", $(this).parent().next())は、$(this).parent().next()の子であるvalidateクラスを持つすべての要素を返します。

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

Answer 2

コードに正しい要素が見つかりません。あなたがテーブルにいるので、何もhttp://jsfiddle.net/6dWFs/

Answer 3

next()ポイント：

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

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

    } else { 

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

コード：これを試してみてください。まず親セルを選択し、.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"); 
    } 
});