如何在输入元素之间切换

Question

我试图在单击（选中）某个输入时添加切换。

div class = "tabs-wrapper">
      <div class="tabs">
    <input type="radio" name="tabs-1" id="tabs-1-0" onclick="location.href='/h/en;">
    <label class="tabs__title  home_tabs" for="tabs-1-0">
      <span class="tabs__separator">
     <f-icon icon="home"></f-icon>   Home
      </span>
    </label>
    <input type="radio" class = "radioBtn"  name="tabs-1" id="tabs-1-1" divId = "div1" value="360003487117">
    <label class="tabs__title" for="tabs-1-1">
      <span class="tabs__separator">
       <f-icon icon="monitor"></f-icon> Cat1 <f-icon icon="caret-down" class = "downNavArrow rotate-reset"></f-icon>
      </span>
    </label>
    <input type="radio" class = "radioBtn"  name="tabs-1" id="tabs-1-2" divId = "div2" value="360003487177">
    <label class="tabs__title" for="tabs-1-2">
      <span class="tabs__separator">
       <f-icon icon="personal"></f-icon> Cat 2 <f-icon icon="caret-down" class = "downNavArrow rotate-reset"></f-icon>
      </span>
    </label>
    <input type="radio" class = "radioBtn"  name="tabs-1" id="tabs-1-3" divId = "div3" value="360004539997">
    <label class="tabs__title" for="tabs-1-3">
      <span class="tabs__separator">
       <f-icon icon="ac-icon_participation"></f-icon> Cat 3 <f-icon icon="caret-down" class = "downNavArrow rotate-reset"></f-icon>
      </span>
    </label>
    <input type="radio" class = "radioBtn"  name="tabs-1" id="tabs-1-4" divId = "div4" value="360003510518">
    <label class="tabs__title" for="tabs-1-4">
      <span class="tabs__separator">
       <f-icon icon="users"></e-icon> Cat 4 <f-icon icon="caret-down" class = "downNavArrow rotate-reset"></f-icon>
      </span>
    </label>
    <input type="radio" class = "radioBtn"  name="tabs-1" id="tabs-1-5" divId = "div5" value="360003487197">
    <label class="tabs__title" for="tabs-1-5">
      <span class="tabs__separator">
        <f-icon icon="media-rich"></f-icon>Cat 5 <f-icon icon="caret-down" class = "downNavArrow rotate-reset"></f-icon>
      </span>
    </label>
    <div class="tabs__panel">
      <div class="tabs__panel__content" id = "div0">
   
      </div>
      <div class="tabs__panel__content" id = "div1">

      </div>
      <div class="tabs__panel__content" id = "div2">

      </div>
      <div class="tabs__panel__content" id = "div3">

      </div>
      <div class="tabs__panel__content" id = "div4">
   
      </div>
       <div class="tabs__panel__content" id = "div5">
   
      </div>
    </div>

      </div>
    </div>

通过发出获取请求，我能够提取我需要的所有信息并将其显示在相应的选项卡中。到目前为止，在我的代码中，我能够将信息附加到选项卡中。但是，我希望能够在单击“radioBtn”时切换信息（隐藏和展开）。有没有更好的方法来重写我所拥有的在下面尝试并也使切换工作？ 我也尝试在点击功能中添加切换功能，但这样做后我能够看到网站上的复选框，默认情况下隐藏的复选框。

function summonSct() {
$.getJSON('/api/center/cats/'+ sct_select + '/articles.json', function(data) { 
    $.each(data.articles, function(index,item) {
    var listArt = '<p><a href="'+ item.html_url + '">' + item.title + '</a></p>'
    $('.tabs__panel__content').append(listArt);
       $('.tabs__panel').show("slow");
});
});
}
$(".radioBtn").on("click", function() {
  var checkedIds = $(".radioBtn:checked").map(function() {
    return this.id;
  }).toArray();
  console.log(checkedIds);
        $('.tabs__panel').hide("slow");
        $('.tabs__panel__content').empty();
        summonSct(); 
});

Answer 1

因为它是一个单选按钮而不是一个复选框，所以我认为不需要使用 .map() 来获取您点击的复选框的 ID，您可以使用 $(this).attr("id")

注意在下面的解决方案中，我删除了 ajax，因为我们无法测试该部分。

function summonSct(id) {
  var n = id.split('-').pop()
  console.log('#div' + n + '.tabs__panel__content')
  $('#div' + n + '.tabs__panel__content').append(id);
  $('#div' + n + '.tabs__panel').show("slow");
}
$(".radioBtn").on("click", function() {
  var checkedIds = $(this).attr("id")
  console.log(checkedIds);
  $('.tabs__panel__content').empty();
  summonSct(checkedIds);
});

演示

function summonSct(id) {
  var n = id.split('-').pop()
  console.log('#div' + n + '.tabs__panel__content')
  $('#div' + n + '.tabs__panel__content').append(id);
  $('#div' + n + '.tabs__panel').show("slow");
}
$(".radioBtn").on("click", function() {
  var checkedIds = $(this).attr("id")
  console.log(checkedIds);
  $('.tabs__panel__content').empty();
  summonSct(checkedIds);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs-wrapper">
  <div class="tabs">
    <input type="radio" name="tabs-1" id="tabs-1-0" onclick="location.href='/h/en;'">
    <label class="tabs__title  home_tabs" for="tabs-1-0">
      <span class="tabs__separator">
     <f-icon icon="home"></f-icon>   Home
      </span>
    </label>
    <input type="radio" class="radioBtn" name="tabs-1" id="tabs-1-1" divId="div1" value="360003487117">
    <label class="tabs__title" for="tabs-1-1">
      <span class="tabs__separator">
       <f-icon icon="monitor"></f-icon> Cat1 <f-icon icon="caret-down" class = "downNavArrow rotate-reset"></f-icon>
      </span>
    </label>
    <input type="radio" class="radioBtn" name="tabs-1" id="tabs-1-2" divId="div2" value="360003487177">
    <label class="tabs__title" for="tabs-1-2">
      <span class="tabs__separator">
       <f-icon icon="personal"></f-icon> Cat 2 <f-icon icon="caret-down" class = "downNavArrow rotate-reset"></f-icon>
      </span>
    </label>
    <input type="radio" class="radioBtn" name="tabs-1" id="tabs-1-3" divId="div3" value="360004539997">
    <label class="tabs__title" for="tabs-1-3">
      <span class="tabs__separator">
       <f-icon icon="ac-icon_participation"></f-icon> Cat 3 <f-icon icon="caret-down" class = "downNavArrow rotate-reset"></f-icon>
      </span>
    </label>
    <input type="radio" class="radioBtn" name="tabs-1" id="tabs-1-4" divId="div4" value="360003510518">
    <label class="tabs__title" for="tabs-1-4">
      <span class="tabs__separator">
       <f-icon icon="users"></e-icon> Cat 4 <f-icon icon="caret-down" class = "downNavArrow rotate-reset"></f-icon>
      </span>
    </label>
    <input type="radio" class="radioBtn" name="tabs-1" id="tabs-1-5" divId="div5" value="360003487197">
    <label class="tabs__title" for="tabs-1-5">
      <span class="tabs__separator">
        <f-icon icon="media-rich"></f-icon>Cat 5 <f-icon icon="caret-down" class = "downNavArrow rotate-reset"></f-icon>
      </span>
    </label>
    <div class="tabs__panel">
      <div class="tabs__panel__content" id="div0">

      </div>
      <div class="tabs__panel__content" id="div1">

      </div>
      <div class="tabs__panel__content" id="div2">

      </div>
      <div class="tabs__panel__content" id="div3">

      </div>
      <div class="tabs__panel__content" id="div4">

      </div>
      <div class="tabs__panel__content" id="div5">

      </div>
    </div>

  </div>
</div>