时间戳

首页 > 解决方案 > jQuery 切换功能无法按预期使用每个和单击功能

javascript - jQuery 切换功能无法按预期使用每个和单击功能

问题描述

我试图+Details在单击和显示元素后隐藏它xClose，反之亦然，但它不起作用。此外，当我单击+Details所有 div 时，即使我使用了each()函数，也会打开。当您单击xClose我希望显示eventInfo文本时，我什xClose至无法显示文本。

$('.openInfo').each(function (index) {
  $(this).click(function () {
    $('.eventInfo').toggleClass('show');
    $('openInfo').toggleClass('hide');
    $('closeInfo').toggleClass('show');
  });
});


$('.closeInfo').each(function (index) {
  $(this).click(function () {
    $('.eventInfo').toggleClass('show');
    $('closeInfo').toggleClass('hide');
    $('openInfo').toggleClass('show')
  });
});
  .event{
    margin-bottom: 30px;
  }

  .eventInfo, .closeInfo{
    display: none;
  }

  .show{
    display: block;
  }

  .hide{
    display: none;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event">
            <p class="openInfo"><span>+</span>Details</p>
            <p class="eventInfo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            <p class="closeInfo"><span>x</span>Close</p> 
    </div>
    <div class="event">
            <p class="openInfo"><span>+</span>Details</p>
            <p  class="eventInfo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            <p class="closeInfo"><span>x</span>Close</p>
    </div>

标签： javascriptjquery

解决方案

您需要将单击侦听器附加到事件中.closeInfo，.openInfo然后在事件内部，需要toggle()其 parent 中的类.event。

$('.closeInfo, .openInfo').on('click', function() {
  let $closestEvent = $(this).closest('.event');
  $closestEvent.find('.eventInfo, .closeInfo, .openInfo' ).toggle();
});
.event {
  margin-bottom: 30px;
}

.eventInfo,
.closeInfo {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="event">
  <p class="openInfo"><span>+</span>Details</p>
  <p class="eventInfo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  <p class="closeInfo"><span>x</span>Close</p>
</div>

<div class="event">
  <p class="openInfo"><span>+</span>Details</p>
  <p class="eventInfo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  <p class="closeInfo"><span>x</span>Close</p>
</div>

推荐阅读