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未选择您期望的元素。

假设您要尝试将类添加到被点击的span的同级.kyc-flag中，那么您可以使用jQuery的is()方法来确定被点击的元素，然后使用{{1} }来添加该类的兄弟。试试这个：

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;
}

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

2 个答案: