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（）。show（）; '显示'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();
    }
}

.next（）函数

3 个答案: