jQuery 在单击时在不相关的 div 之间切换

Question

我试图在按下 btn 时切换 slides 包装器中的 slidingDiv 。我不确定是否需要数据属性，或者如何点击在幻灯片之间切换。

$('.show_hide').on("click", function() {
  $('.slidingDiv').stop().slideUp('fast');
  $(this).next('.slidingDiv').stop().slideToggle('fast');
});

.btn-wrap {
  display: flex;
}

.btn {
  cursor: pointer
}

.slides {
  border: 2px solid;
}

.slide {
  height: 200px;
  width: 200px;
  display: none;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-wrap">
  <div class="btn">Butt1</div>
  <div class="btn">Butt2</div>
</div>
<div class="slides">
  <div class="slide">For Butt1</div>
  <div class="slide">For Butt2</div>
</div>

Answer 1

通过以下方式更新您的代码

$(function(){
    $('.btn').on("click", function(){
        var $this = $(this);        
        $('.slide').slideUp('fast',function(){
            $(this).filter('[data-btnid="'+$this.data('btnid')+'"]').slideDown();
        });
    });    
});

.btn-wrap {
    display: flex;
}
.btn {
    cursor: pointer
}
.slides {
    border: 2px solid;
}
.slide {
    position: absolute;
    height: 200px;
    width: 200px;
    float: left;
    display: none;
    border: 1px solid;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-wrap">
    <div class="btn" data-btnid="1">Butt1</div>
    <div class="btn" data-btnid="2">Butt2</div>
</div>
<div class="slides">
    <div class="slide" data-btnid="1">For Butt1</div>
    <div class="slide" data-btnid="2">For Butt2</div>
</div>