使用最后一次单击仅显示一个弹出窗口

Question

当用户点击了想要的 clickTarget 后，添加一个类来显示警告。

但是当用户点击另一个字段/clickTarget 时，它应该隐藏当前显示的弹出窗口，然后显示下一个弹出窗口。

$(document).click(function(event) {
  var clickTarget = event.target.classList[1],
    clickParent = event.target.classList[0];
    
  if (clickTarget === 'kyc-flag') {
    $(event.target.nextSibling.nextSibling).addClass('kyc-warning');
  }

  setTimeout(function() {
    $('.kycFlagIcon').removeClass('kyc-warning');
  }, 1500);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row middle-xs center-xs ">
  <fieldset class="col-xs-12 col-md-6">
    <div class="input-set">
      <span class="label">Company Name</span>
      <input name="MerchantName" class="bp-company-name-field kyc-flag" placeholder="Company name" type="text" value="Brand P" title="Company Name" disabled="" required="">
      <span class="kycFlagIcon bp-company-name-field">!</span>
    </div>
  </fieldset>
  <fieldset class="col-xs-12 col-md-6">
    <div class="input-set">
      <span class="label">Username</span>
      <input name="UserName" placeholder="Username" class="bp-username-field valid" type="text" value="Branded" required="" data-rule-minlength="2" data-rule-maxlength="255" aria-invalid="false">
    </div>
  </fieldset>
</div>

工作 js 小提琴进度示例 - https://jsfiddle.net/vrwfa2s5/

Answer 1

不确定这是不是你想要的：https://jsfiddle.net/vrwfa2s5/3/

您必须稍微重构一下您的 JavaScript 代码。

您可以改为定位元素。

$(document).ready(function(event) {

  $('.kyc-flag').on('click', function() {

    $('.kycFlagIcon').removeClass('kyc-warning');

    $(this).closest('.input-set').find('.kycFlagIcon').toggleClass('kyc-warning');

  });

});

Answer 2

问题是因为nextSibling.nextSibling 没有选择您期望的元素。

假设您尝试将类添加到单击的.kyc-flag 的兄弟span，那么您可以使用jQuery 的is() 方法来确定单击的元素，然后next() 让兄弟添加上课到。试试这个：

$(document).click(function(e) {
  var $target = $(e.target);

  if ($target.is('.kyc-flag')) {
    var $flag = $target.next();
    $flag.addClass('kyc-warning');
    setTimeout(function() {
      $flag.removeClass('kyc-warning');
    }, 1500);
  }
});

.kycFlagIcon {
  opacity: 0;
}

.kyc-warning {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row middle-xs center-xs ">
  <fieldset class="col-xs-12 col-md-6">
    <div class="input-set">
      <span class="label">Company Name</span>
      <input name="MerchantName" class="bp-company-name-field kyc-flag" placeholder="Company name" type="text" value="Brand P" title="Company Name" disabled="" required="">
      <span class="kycFlagIcon bp-company-name-field">!</span>
    </div>
  </fieldset>
  <fieldset class="col-xs-12 col-md-6">
    <div class="input-set">
      <span class="label">Username</span>
      <input name="UserName" placeholder="Username" class="bp-username-field valid" type="text" value="Branded" required="" data-rule-minlength="2" data-rule-maxlength="255" aria-invalid="false">
    </div>
  </fieldset>
</div>