使用jquery

Question

我创建了多个表单输入字段，当用户单击输入字段时，该字段将显示隐藏的弹出窗口。

Fiddle HERE

工作原理：

当用户点击输入字段1时，类is-displayed会添加div父protect-field-container。当用户点击输入字段2时，类is-displayed将从元素1中删除，并添加到元素2中。

我似乎无法按照我希望它的工作方式运行此功能。下面是我的代码片段。

Jquery：

$('.popUp-block').on("click", function(){
    var $popUp = $(this).closest('.protect-field-container')

    if ($popUp.hasClass('is-displayed')) {
       $popUp.toggleClass('is-displayed');
    } else {
        $popUp.addClass('is-displayed');
    }
});

HTML：

<div class="field-container">
    <div class="protect-field-container two-cols col-md-4">

        <article class="protect-field planner-form">
            <label for="#">Who shall we think about ? <i class="fa fa-question-circle"></i></label>
            <input type="text" class="characters popUp-block">
            <i class="valid-checked fa fa-check-circle"></i>
            <i class="invalid-checked fa fa-times-circle"></i>
        </article>

        <div class="protect-popup">
            <h3>Permanent Total and Partial Disability</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
            <a href="#">More information</a>
            <span>&euro; 100,000 - &euro; 50,000</span>
        </div>

    </div>
</div>

Answer 1

<强> Working fiddle

在这种情况下，您不必使用切换，当用户单击并将其添加到当前单击的字段容器时，您可以从所有容器中删除类is-displayed，例如：

$('.popUp-block').on("click",function() {
    //Remove class from all the containers
    $('.protect-field-container').removeClass('is-displayed');

    //Add class to the current clicked container
    $(this).closest('.protect-field-container').addClass('is-displayed');
});

或者您只需使用show/hide函数即可完成，请查看示例。

希望这有帮助。

＆＃13;

＆＃13;

$('.protect-popup').hide();

$('.popUp-block').on("click",function() {
  $('.protect-popup').hide();
  $(this).closest('.protect-field-container').find('.protect-popup').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-container">
  <div class="protect-field-container two-cols col-md-4">
    <article class="protect-field planner-form">
      <label for="#">Who shall we think about ? <i class="fa fa-question-circle"></i></label>
      <input type="text" class="characters popUp-block">
      <i class="valid-checked fa fa-check-circle"></i>
      <i class="invalid-checked fa fa-times-circle"></i>
    </article>
    <div class="protect-popup">
      <h3>Permanent Total and Partial Disability</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
      <a href="#">More information</a>
      <span>&euro; 100,000 - &euro; 50,000</span>
    </div>
  </div>

  <div class="protect-field-container two-cols col-md-4">
    <article class="protect-field planner-form">
      <label for="#">How many childern do have ? <i class="fa fa-question-circle"></i></label>
      <input type="text" name="" class="characters popUp-block">
      <i class="valid-checked fa fa-check-circle"></i>
      <i class="invalid-checked fa fa-times-circle"></i>
    </article>
    <div class="protect-popup">
      <h3>Permanent Total and Partial Disability</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
      <a href="#">More information</a>
      <span>&euro; 100,000 - &euro; 50,000</span>
    </div>
  </div>
  <div class="protect-field-container two-cols col-md-4">
    <article class="protect-field planner-form">
      <label for="#">Who shall we think about ? <i class="fa fa-question-circle"></i></label>
      <input type="text" class="characters popUp-block">
      <i class="valid-checked fa fa-check-circle"></i>
      <i class="invalid-checked fa fa-times-circle"></i>
    </article>
    <div class="protect-popup">
      <h3>Permanent Total and Partial Disability</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
      <a href="#">More information</a>
      <span>&euro; 100,000 - &euro; 50,000</span>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;