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

Question

我在按下slidingDiv时尝试切换slides包装中的btn。我不确定我是否需要data-attributes或我如何toggle幻灯片之间on click。

＆＃13;

＆＃13;

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

＆＃13;

.btn-wrap {
  display: flex;
}

.btn {
  cursor: pointer
}

.slides {
  border: 2px solid;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

按照

更新您的代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;