Question

我想这样做。

<p class="validator">This is an error!</p>
<input type="text" validator="isGoodValue" value=""/>

<p class="validator">This is an error 2!</p>
<label>
<input type="text" validator="isGoodValue" value=""/></label>

<div><p class="validator">This is an error 3!</p></div>
<label>
<input type="text" validator="isGoodValue" value=""/></label>    

<script>
$('input').change( function() {
 if (!isGoogValue( $(this).val() )) {
     $(this).GET_ME_THE_VALIDATOR_ABOVE_ME().show();
 }
 else {
     $(this).GET_ME_THE_VALIDATOR_ABOVE_ME().hide();
 }
});
</script>

GET_ME_THE_VALIDATOR_ABOVE_ME的代码可能是什么，以获得上面的完全

验证器，独立于HTML结构？或jQuery的哪些功能可以正常工作...... ???

我正在尝试使用最近的，父母，上一个..但这不太有用。

Answer 1

试试这个

 if (!isGoogValue( $(this).val() )) {
     $(this).prevAll('.validator:first').show();
 }
 else {
     $(this).prevAll('.validator:first').hide();
 }

Answer 2

真正的解决方案是拥有一些一致的结构，以便您的错误消息不会与输入完全断开，然后您可以使用类似于Anton建议的解决方案。

或者，如果绝对不可能将HTML重构为理智，那么您可以为您的错误消息提供所有输入和ID的ID，这些错误消息可以以某种方式相关。例如，输入1的ID为input1，相应的错误为input1error。然后你可以做这样的事情：

$('input').change( function() {
     if (!isGoodValue( $(this).val() )) {
         var id = $(this).attr("id");
         $("#" + id + "error").show();
     }
     else {
         var id = $(this).attr("id");
         $("#" + id + "error").hide();
     }
 });

请参阅此fiddle。

现在你的错误出现在哪里并不重要，只要它们可以通过它们的ID以某种方式相关联。

此fiddle中显示的另一个解决方案假设第n个输入对应于第n个验证器，如下所示：

$('input').each(function(index, elem) {
    var idx = index;
    $(elem).change(function() {
        var val = $('.validator').eq(idx);
        if (!isGoodValue( $(this).val() )) {
            val.show();                
        }
        else {
            val.hide();
        }
    });            
});

如何使用jQuery将前一个元素转换为另一个元素？

2 个答案: