javascript - .next() function

Question

I have the following html code:

<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>

I need to display the 'green_tick.png' image when user fills in the field. For this I used the javascript function below:

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();
    }
}

I am using ' .next().show(); ' to show the 'green_tick.png' image, but it does not seem to work.

Any suggestion??

Thanks

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 docs，该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();
    }
}