jquery - jquery 单选组在点击时切换

Question

$("input[name=sample]").click(function(){
            $("#"+$(this).val()).show();
            $("#"+$("input[name=sample]:not(:checked)").val()).hide();
    });
}); 

我用它在两个 div 之间切换。但是当我添加第三个 div 和单选按钮时，这对第三个不起作用。它在点击时显示，但不隐藏其他人。什么会导致这种情况？

Answer 1

向所有 Div 添加一个类，并在显示之前隐藏该类。（例如：class="divHide"）

$("input[name=sample]").click(function(){
    $(".divHide").hide();
    $("#"+$(this).val()).show();
});

Answer 2

隐藏每个未选择的元素：

$("input[name=sample]").click(function(){
    $("#"+$(this).val()).show();
        $("input[name=sample]:not(:checked)").each(index, item){
            $("#" + $(item).val()).hide();
        });
    });
}); 

Answer 3

您现在要隐藏多个元素，因此请使用以下内容：

$('input[name="sample"]').on('click', function(){
      $("#"+this.value).show();
      $("input[name=sample]:not(:checked)").each(function() {
          $('#'+this.value).hide();
      });
});