jquery - if 和 else 代码块一起运行

Question

我正在尝试循环浏览加载的表单(可能已预先填充字段)，并在字段分别填写或空白时分配一个检查或一个叉号。

jQuery 是:

 $(document).ready(function(){
    
      // test code for dynamic validation
      var $feedback = '.form-feedback';
      var $icon = 'i';
      var $good = 'ion-checkmark-circled';
      var $bad = 'ion-close-circled';
    
      // form selectors
      var arr = ["username", "first-name", "last-name"];
    
      $.each(arr, function(i, val) {
        if ($("#form-" + val ).val() !== '') {
          console.log("#form-" + val + ": "+ $good);
          $("#form-" + val ).siblings($feedback).find($icon).addClass($good);
        } else {
          console.log("#form-" + val+ ": "+ $bad);
          $('.main-input-field input').siblings($feedback).find($icon).addClass($bad);
        }
      });
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Username:</p>
    <p class="main-input-field"><input id="form-username" class="username" type="text" name="UserName" ><span class="form-feedback"><i></i></span></p>
    <p>First Name:</p>
    <p class="main-input-field"><input type="text" id="form-first-name" name="FirstName" ><span class="form-feedback"><i></i></span></p>
    <p>Surname:</p>
    <p class="main-input-field"><input type="text" id="form-last-name" name="Surname" ><span class="form-feedback"><i></i></span></p>

如你所见，我有一个空白<i>我想添加一个类的元素，该类将显示支票或十字。当输入字段为空时，它工作得很好，但如果输入字段有值，它会运行代码，然后还添加 else 代码(即添加 $good 类，然后添加 $bad 类)。结果是所有结果的交叉。

有什么帮助吗？

谢谢。

Answer 1

这并不是因为 else 也能运行。这是因为你使用的是siblings()。

尝试运行这个:

console.log($('.main-input-field input').siblings('.form-feedback'));

你将改变它们。阅读 documentation关于 sibling 如何工作