javascript - 如何在多个div中显示隐藏单个区域

Question

我们在代码中遇到了一个问题，在我的代码函数中有一个主要的 div 区域，当我们更改或选择单选按钮时，我们有两个单选按钮有两个部分，一个用于文本区域，一个用于文件加载按钮，当我们点击它们显示和隐藏。

请找到我的代码链接:- https://jsfiddle.net/bharat_negi/bw6uw9ah/

jquery 代码:-

function changeCheck(){       
      $('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {   
        var changeOption = $(this).closest('.radioArea').attr("data-id");
        console.log(changeOption);

        if (this.value == 'Image') {
            $('.textArea').show();
            $('.browseArea').hide();
        }
        else if (this.value == 'Text') {
            $('.textArea').hide();
            $('.browseArea').show();
        }

      });

    }

Answer 1

试试这个。你需要从 closest 父级定位 textarea 元素，否则它的目标是所有 texarea 元素。这就是为什么它隐藏所有 textarea 并选择按钮。并且还更改匹配的 if 使用 Text else 使用 Image

changeCheck();

function changeCheck() {
  $('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
    var changeOption = $(this).closest('.radioArea').attr("data-id");
    console.log(changeOption);

    if (this.value == 'Text') {
      $(this).closest('.questionBlock').find('.textArea').show();
      $(this).closest('.questionBlock').find('.browseArea').hide();
    } else if (this.value == 'Image') {
      $(this).closest('.questionBlock').find('.textArea').hide();
      $(this).closest('.questionBlock').find('.browseArea').show();
    }

  });

}

.questionBlock {
  float: left;
  margin: 0;
  padding: 10px 0;
  width: 100%;
  display: flex;
}

.questionBlock .alloption {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
  clear: both;
}

.questionBlock .text {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 10%;
}

.questionBlock .radioArea {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 20%;
}

.questionBlock .textArea {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 70%;
}

.questionBlock .browseArea {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 70%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
  <div class="text">Option 1</div>
  <div class="radioArea" data-id="upload1">
    <input type="radio" name="gender" value="Image" checked> Image
    <input type="radio" name="gender" value="Text"> Text
  </div>
  <div class="textArea">
    <textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
  </div>
  <div class="browseArea">
    <input type="file" name="" class="" id="">
  </div>
</div>

<div class="questionBlock">
  <div class="text">Option 2</div>
  <div class="radioArea" data-id="upload2">
    <input type="radio" name="gender" value="Image" checked> Image
    <input type="radio" name="gender" value="Text"> Text
  </div>
  <div class="textArea">
    <textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
  </div>
  <div class="browseArea">
    <input type="file" name="" class="" id="">
  </div>
</div>

<div class="questionBlock">
  <div class="text">Option 3</div>
  <div class="radioArea" data-id="upload3">
    <input type="radio" name="gender" value="Image" checked> Image
    <input type="radio" name="gender" value="Text"> Text
  </div>
  <div class="textArea">
    <textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
  </div>
  <div class="browseArea">
    <input type="file" name="" class="" id="">
  </div>
</div>