JQuery 开关语句(隐藏/显示逻辑)

Question

它

应该如何工作：按钮"显示照片"打开"内容1"，"显示视频"打开"内容2"，"显示地图"打开"内容4"

1. 开关-1"显示照片" <-> "显示视频"。此模式正常工作
2. 开关-2"显示地图" ->"显示照片"或"显示视频"（取决于开关-1）。单击按钮后显示"显示地图"而不是"关闭地图"显示照片"或"显示视频"按钮

当"内容

4"处于活动状态时，可以通过单击"显示照片"或"显示视频"来打开"内容 1"或"内容 2"

导航结构可以自由更改。

$(function() {
  $('.j-lst-toggle').each(function() {
    var $this = $(this);
    $this.on('click', 'button', function(e) {
      e.preventDefault();
      $this.children().toggleClass('active');
      if ($this.hasClass('j-media-toggle')) {
        $this.closest('.j-multimedia-cnt').find('.j-media').children().toggleClass('active');
      } else if ($this.hasClass('j-map-toggle')) {
        $this.closest('.j-multimedia-cnt').find('.j-multimedia').children().toggleClass('active');
      }
    });
  });
  
});

.j-multimedia-cnt {
  border: 3px solid black;
}
.lst-c-actions {
  list-style: none;
}
.j-lst-toggle__btn {
  display: none;
}
.j-lst-toggle__btn.active {
  display: block;
}
.lst-c-actions__btn {
  display: none;
}
.lst-c-actions__btn.active {
  display: block;
}
.j-media__item {
  display: none;
}
.j-media__item.active {
  display: block;
}
.j-multimedia__item {
  display: none;
}
.j-multimedia__item.active {
  display: block;
}
.cols {
  display: flex;
}
.cols__item--left {
  width: 70%;
}
.cols__item--right {
  width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="j-multimedia-cnt">
  <nav>
    <ul class="lst-c-actions">
      <li class="lst-c-actions__item j-lst-toggle j-media-toggle">
        <button type="button" class="lst-c-actions__btn btn-icon j-lst-toggle__btn active"><span class="btn-icon__ico icon video">icon-video</span> <span class="btn-icon__text">Show video</span></button>
        <button type="button" class="lst-c-actions__btn btn-icon j-lst-toggle__btn"><span class="btn-icon__ico icon photo">icon-photo</span> <span class="btn-icon__text">Show photo</span></button>
      </li>
      <li class="lst-c-actions__item j-lst-toggle j-map-toggle">
        <button type="button" class="lst-c-actions__btn btn-icon j-lst-toggle__btn active"><span class="btn-icon__ico icon map">icon-map</span> <span class="btn-icon__text">Show on map</span></button>
        <button type="button" class="lst-c-actions__btn btn-icon j-lst-toggle__btn"><span class="btn-icon__ico icon map">icon-map</span> <span class="btn-icon__text">Close map</span></button>
      </li>
    </ul>
  </nav>
  
  <div class="j-multimedia">
    <div class="j-multimedia__item active">
      <div class="cols">
        <div class="cols__item cols__item--left">
          <div class="j-media">
            <div class="j-media__item active">
              <div style="background: red">Content 1</div>
            </div>
            <div class="j-media__item">
              <div style="background: green">Content 2</div>
            </div>
          </div>
        </div>
        <div class="cols__item cols__item--right">
          <div style="background: grey">Content 3</div>
        </div>
      </div>
    </div>
    <div class="j-multimedia__item">
      <div style="background: yellow">Content 4</div>
    </div>
  </div>
</div>

"

Answer 1

您需要

删除"关闭映射"按钮并对事件处理程序进行以下更改...首先更改按钮的切换以仅隐藏当前按钮并显示所有其他按钮：

$this.children().addClass('active'); // Show all buttons
$this.siblings().children().addClass('active');
$(this).removeClass('active'); // Hide clicked button

然后根据按钮的索引显示特定媒体（您没有与内容编号相同的顺序，因此显示第 1 - index 个元素）：

if ($this.hasClass('j-media-toggle')) {
    var media = $this.closest('.j-multimedia-cnt').find('.j-media').children();
    media.eq(1 - $(this).index()).addClass('active');
    media.eq($(this).index()).removeClass('active');

最后切换显示媒体或地图。

    media.closest('.j-multimedia').children(':has(.j-media)').addClass('active')
        .siblings().removeClass('active');
} else if ($this.hasClass('j-map-toggle')) {
    $this.closest('.j-multimedia-cnt').find('.j-multimedia').children()
        .toggleClass('active');
}

在这里看到一个完整的工作示例：http://jsfiddle.net/v3Ld8u7L/1/