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

时间:2017-09-14 11:08:49

标签: javascript jquery

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

请找到我的代码链接: - 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();
        }

      });

    }

4 个答案:

答案 0 :(得分:2)

试试这个。你需要从closest父目标定位textarea的元素,否则它的目标是所有texarea元素。这就是为什么它隐藏所有textarea并选择按钮。并且还改变了匹配if使用Text其他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>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

你可以在这里找到工作的jsfiddle而无需对代码进行太多更改

function changeCheck(){       
          $('.questionBlock').on('change', 'input[type=radio]', function() {    

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

          });

        }

Multiple checkbox toggle with image and textarea

答案 2 :(得分:1)

这是更新的jquery函数:

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 == 'Image') {
            $(this).closest('.questionBlock').find('.textArea').show();
            $(this).closest('.questionBlock').find('.browseArea').hide();
        }
        else if (this.value == 'Text') {
            $(this).closest('.questionBlock').find('.textArea').hide();
          $(this).closest('.questionBlock').find('.browseArea').show();
        }

      });

    }

我使用$(this).closest('.questionBlock')来获取相关的textarea和fileupload元素。

答案 3 :(得分:0)

这里$(this).parent().closest('div')将获得'radioArea'div然后你调用.next()它将在'radioArea'之后检索下一个div,即'textArea'div,这样你就可以执行show或者隐藏与您单击的项目对应的功能。

  $(this).parent().closest('div').next().next().show();//show browseArea div
  $(this).parent().closest('div').next().hide(); //hide textArea div

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 == 'Image') {
        $(this).parent().closest('div').next().next().show();//show browseArea div
        $(this).parent().closest('div').next().hide(); //hide textArea div
         
		    }
		    else if (this.value == 'Text') {
         $(this).parent().closest('div').next().next().hide(); //hide browseArea div
         $(this).parent().closest('div').next().show(); //show textArea div
		    }

		  });

		}
.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>