질문

Jquery를 사용하여 input [type = "radio"] 으로 탭을 만들려고하는데 탭이 첫 번째 클릭에서 제대로 작동하지만 두 번째 클릭을 클릭하면 작동하지 않습니다. 나는 그것에 붙어 있고 Jquery에서 누락 된 곳을 얻지 못했습니다. 누군가 나를 도울 수 있습니까?

코드 링크는 다음과 같습니다. 여기를 클릭

$('.tablist').on('click', 'input', function(){

  var tabList = $('.tablist-content').attr('id');
  if($(this).attr('type','radio').is(':checked') || $(this).next('label').text() == tabList){
    $(this).parents('.tabWrapper').find("#" + tabList).show();
    console.log(tabList);
  }
  else {
    $(tabList).hide();
  }

});

.tablist-content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabWrapper">
<ul class="list-unstyled tablist">
  <li>
    <input type="radio" name="tablist" id="tablist1">
    <label for="tablist1">List1</label>
  </li>
  <li>
  <input type="radio" name="tablist" id="tablist2">
  <label for="tablist2">List2</label>
  </li>
</ul>

<div class="col-md-12">
  <div class="tablist-content" id="list1">
    List one content
  </div>
  <div class="tablist-content" id="list2">
    List Two content
  </div>
</div>

</div>

Expand snippet

답변1

데이터 속성 사용

확인 여부를 테스트 할 필요가 없습니다.

$('.tablist').on('click', 'input', function() {
  $(".tablist-content").hide()
  $("#"+$(this).data("id")).show()
});

.tablist-content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabWrapper">
<ul class="list-unstyled tablist">
  <li>
    <input type="radio" name="tablist" data-id="list1">
    <label for="tablist1">List1</label>
  </li>
  <li>
  <input type="radio" name="tablist" data-id="list2">
  <label for="tablist2">List2</label>
  </li>
</ul>

<div class="col-md-12">
  <div class="tablist-content" id="list1">
    List one content
  </div>
  <div class="tablist-content" id="list2">
    List Two content
  </div>
</div>

</div>

Expand snippet

답변2

.index ()메서드를 사용하여 표시 할 탭의 색인이되어야하는 클릭 된 라디오의 색인을 결정할 수 있습니다.

또한 선택되지 않음에서 선택 됨으로 변경 될 때만 트리거되는 change이벤트를 사용하는 것을 고려하십시오. 반대로 click이벤트는 목표가 아닌 한 radio 가 이전에 확인되었는지 여부를 트리거합니다.

$('.tablist').on('change', 'input', function() {
    var index = $('input[name=tablist]').index(this);
    $('.tablist-content').hide().eq(index).show();
});

.tablist-content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabWrapper">
<ul class="list-unstyled tablist">
  <li>
    <input type="radio" name="tablist" id="tablist1">
    <label for="tablist1">List1</label>
  </li>
  <li>
  <input type="radio" name="tablist" id="tablist2">
  <label for="tablist2">List2</label>
  </li>
</ul>

<div class="col-md-12">
  <div class="tablist-content" id="list1">
    List one content
  </div>
  <div class="tablist-content" id="list2">
    List Two content
  </div>
</div>

</div>