的.next（）函数

Question

我有以下的HTML代码：

<span class="retrievedValue"><%= f.text_field :DIRECT_LABEL, :class=>"mandatory", :onblur =>"validate_this_textfield(this.value, this.id);" %></span> 
<span style="display: none; float: left;"> <img src="../images/green_tick.png" /></span> 

我需要当用户在现场填充以显示“green_tick.png”图像。 。为此，我使用下面的JavaScript函数：

function validate_this_textfield(field_value, field_id) 
{ 
    if($j('#' + field_id).val() != "") { 

     $j('#' + field_id).next().show(); // show next element after field 
    } 
    else{ 
     $j('#' + field_id).next().hide(); 
    } 
} 

我使用'的.next（）显示（）; '显示'green_tick.png'图像，但它似乎不起作用。

任何建议？

感谢

Answer 1

尝试：

function validate_this_textfield(field_value, field_id) 
{ 
    if($j('#' + field_id).val() != "") { 
     $j('#' + field_id).removeClass('mandatory'); 
     $j('#' + field_id).addClass('mandatory_field_completed') 
     .parent().next().show(); // show next element after field 
    } 
    else{ 
     $j('#' + field_id).removeClass('mandatory_field_completed'); 
     $j('#' + field_id).addClass('mandatory') 
     .parent().next().hide(); 
    } 
} 

你想从跨度接下来，跨度内不会领域，所以你需要去到父第一。

Answer 2

根据jQuery的API文档，所述方法next：

获取每个元素的集合中的 匹配元素紧随其后的兄弟节点。如果提供了选择器，则只有在匹配该选择器时才会检索下一个 兄弟。

<img>标记不是您的字段的兄弟。你将不得不做这样的事情：

$('#fieldID').parent().next().show(); 

这里有一个工作示例：http://jsfiddle.net/wWeyj/

Answer 3

你需要去的跨度首先使用.next()作为跨度之前的

<span class="retrievedValue"> and not the input itself try this.. 

同级

所以添加到您的选择.. .closest('.retrievedValue')

function validate_this_textfield(field_value, field_id) 
{ 
    if($j('#' + field_id).val() != "") { 
     $j('#' + field_id).removeClass('mandatory'); 
     $j('#' + field_id).addClass('mandatory_field_completed') 
     .closest('.retrievedValue').next().show(); // show next element after field 
    } 
    else{ 
     $j('#' + field_id).removeClass('mandatory_field_completed'); 
     $j('#' + field_id).addClass('mandatory') 
     .closest('.retrievedValue').next().hide(); 
    } 
}