javascript - 如何获取三个按钮中的两个按钮的类名称？

Question

我在它们上添加了切换器。现在我想要的是当一个被点击时另外两个隐藏它们相应的div？这是代码:

$(document).ready(function(){
    $('.btn').click(function(){
        var scl = this.className.split(/\s+/)[1];
        console.log(scl);
        $('#' + scl).toggle('slow');
        // document.getElementById('applied').style.display = 'none';
        // document.getElementById('shortlisted').style.display = 'none';
    });
});

这是我用来切换的按钮。

<div class="row-full mt-3">
    <div class="col justify-content-center align-items-center">
        <p class="h6">No. of Openings</p>
        <a data-target="#openings"><button class="btn openings">5</button></a>
    </div>
</div>
<div class="row-full mt-3">
    <div class="col justify-content-center align-items-center">
        <p class="h6">Applied Positions</p>
        <a data-target="#applied"><button class="btn applied">4</button></a>
    </div>
</div>
<div class="row-full mt-3">
    <div class="col justify-content-center align-items-center">
        <p class="h6">Shortlisted</p>
        <a data-target="#shortlisted"><button class="btn shortlisted">1</button></a>
    </div>
</div>

这些是我要切换的部门

<div class="container" id="openings"></div>
<div class="container" id="applied"></div>
<div class="container" id="shortlisted"></div>

Answer 1

您最初可以隐藏所有容器。然后单击“首先”隐藏它们并切换与 id 属性匹配的相应容器:

$(document).ready(function(){
  $('.btn').click(function(){
    // you can set some style on the seleced button
    $('.btn').css({'background-color': '', color: ''});
    $(this).css({'background-color': 'green', color: '#fff'});
    //
    var scl = this.className.split(/\s+/)[1];
    $('.container').hide('slow');
    $('#' + scl).toggle('slow');
  });
});

.container{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row-full mt-3">
    <div class="col justify-content-center align-items-center">
        <p class="h6">No. of Openings</p>
        <a data-target="#openings"><button class="btn openings">5</button></a>
    </div>
</div>
<div class="row-full mt-3">
    <div class="col justify-content-center align-items-center">
        <p class="h6">Applied Positions</p>
        <a data-target="#applied"><button class="btn applied">4</button></a>
    </div>
</div>
<div class="row-full mt-3">
    <div class="col justify-content-center align-items-center">
        <p class="h6">Shortlisted</p>
        <a data-target="#shortlisted"><button class="btn shortlisted">1</button></a>
    </div>
</div>

<div class="container" id="openings">Openings</div>
<div class="container" id="applied">Applied</div>
<div class="container" id="shortlisted">Shortlisted</div>