Javascript 根据if-else语句不显示和隐藏错误消息

我有一个函数，它循环遍历表单的所有输入，并检查它们是否已填充。如果该字段为空，则会使该特定输入变为粉红色，并返回false

我试图在未填充的输入下面添加一条“Field Required”消息。因此，我在每一行之后都编码了一个额外的表行，其中包含一个保存错误消息的div。在页面加载时，div的css设置为“display:none”

现在，我的函数为每个输入显示“required”，而不仅仅是空白的输入，但粉红色仍然正常工作

如何让“必需”div像粉色那样正确显示和隐藏

checkinputs = function (blockOne,blockTwo) {
inputGood = true;
blOne = $(blockOne);
blTwo = $(blockTwo);
blInput = [blOne,blTwo];
for (x = 0; x < 2; x++) {
        var validators = blInput[x].find(" [id$='RequiredIndicator']").parent().parent('tr').find(':input:not(:hidden)');
        var notAllFilled = validators.filter(function(){
        var myInput = $(this); //.parent().parent('tr').find(':input');
        var filledVal = myInput.val();
        var isFilled = $.trim(filledVal).length;
            if (isFilled) {
                $(this).css('background-color', 'white');

                $(this).closest('div').find('.required').hide();

                $(this).parent('td').prev('td').find('span').text('*'); 
                }
            else {
            $(this).css('background-color', 'pink');

            $(this).closest('div').find('.required').show();

             $(this).parent('td').prev('td').find('span').text('*');            
            inputGood = false;  
            }
        return isFilled;
        }).length;
    var inputCount = validators.length;
};
    if( !inputGood ){
        $('#errorAlert').append('<span style="font-weight:bold;">"Some required    information is missing. Please complete the missing fields below."</span>' + '<br><br>');
        $('#errorAlertTwo').append('<span style="font-weight:bold;">"Some required credit card information is missing. Please complete the missing fields below."</span>' + '<br><br>');    
    }
    return inputGood;   
};

checkinputs=函数（块一，块二）{
inputGood=true；
blOne=$（blockOne）；
blTwo=$（blockTwo）；
blInput=[blOne，blTwo]；
对于（x=0；x<2；x++）{
var validators=blInput[x].find（“[id$='requiredicator']”）。parent（）.parent（'tr'）。find（':input:not（：hidden）'）；
var notAllFilled=validators.filter（函数（）{
var myInput=$（this）；//.parent（）.parent（'tr'）.find（'：input'）；
var filledVal=myInput.val（）；
var isFilled=$.trim（filledVal）.length；
如果（已填写）{
$（this.css（'background-color'，'white'）；
$（this）.closest（'div'）.find（'.required'）.hide（）；
$（this）.parent（'td'）.prev（'td'）.find（'span'）.text（'*'）；
}
否则{
$（this.css（'background-color'，'pink'）；
$（this）.closest（'div'）.find（'.required'）.show（）；
$（this）.parent（'td'）.prev（'td'）.find（'span'）.text（'*'）；
输入良好=错误；
}
已填写退货单；
}).长度；
var inputCount=validators.length；
};
如果（！inputGood）{
$（'#errorAlert'）。追加（''缺少一些必需的信息。请填写下面缺少的字段。“+”

'）；
$（'#errorAlertTwo'）。追加（''缺少一些必需的信用卡信息。请填写下面缺少的字段。“+”

'）；
}
返回输入良好；
};

这里是一个问题的小摆设：

---

您的问题几乎肯定是您显示div的行：

$(this).closest('div').find('.required').show();

这条线的作用是：

从$（this）开始，它将查找最近的祖先[包括$（this）]，这是一个div，位于DOM树的上游

在该div下查找类为“required”的所有元素，并显示它们

---

如果不了解HTML的结构，我的猜测是DOM树上最近的div元素包含了所有.required元素。您需要将该语句中的“div”替换为DOM树中较低的一个元素，该元素仅包含$（this）和您想要显示的一个。必需元素。

请显示html标记，同时显示完整的js代码，$（this）指的是什么？如果您可以制作一个fiddle，它会更好！如果没有HTML，此javascript代码将毫无意义。把你的HTML贴到对不起，添加了一个问题！该死，我的提琴没有按应有的方式启动功能。这很有道理，我想这可能就是问题所在。我添加了一些代码，这样您就可以看到html的结构了。看起来，这些代码的工作方式并不完全正确-最简单的方法可能是向具有标签、输入和div的td元素添加一个类似.field_holder的类，并使用

$（this）.closest（'.field_holder'）.find（'.required'）.show（）不幸的是，所需的div与输入不在同一个td中。每个必需的标签位于下一行，三个td结束。我该如何定位呢？找到输入字段的第一个公共父字段和要放入新类的div。（我认为这碰巧也是td元素，但我可能误读了它）。