如何在多個div中顯示隱藏單個區域

我們在代碼中存在一個問題，在我的代碼函數中存在主要div區域，並且在這裏我們有兩個單選按鈕，當我們更改或選擇無線電時，有兩個部分是textarea和一個用於文件上傳按鈕，當我們點擊他們顯示和隱藏。如何在多個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(); 
     } 

     }); 

    }

來源

2017-09-14 Bharat Negi

你到底需要做這麼多的變化對您的代碼？每次點擊單選按鈕時只隱藏1個字段？真的很難理解你到底想要達到什麼目標。 – ZombieChowder

這是你想要的嗎？ https://jsfiddle.net/bw6uw9ah/1/ –

是的，但無線電每塊選擇一個，目前它正在爲所有工作 –

嘗試this.You需要從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>

來源

2017-09-14 11:12:45 prasanth

在這裏被更新的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元素。

來源

2017-09-14 11:14:34

這裏$(this).parent().closest('div')將得到「radioArea」 DIV然後調用.next()它將「radioArea」，這是「textarea的」 DIV後檢索下一個DIV所以在這種方式，您可以執行顯示或隱藏對應於項的功能，你點擊了。

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

changeCheck(); 
 

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

 
\t \t \t if (this.value == 'Image') { 
 
     $(this).parent().closest('div').next().next().show();//show browseArea div 
 
     $(this).parent().closest('div').next().hide(); //hide textArea div 
 
      
 
\t \t  } 
 
\t \t  else if (this.value == 'Text') { 
 
     $(this).parent().closest('div').next().next().hide(); //hide browseArea div 
 
     $(this).parent().closest('div').next().show(); //show textArea div 
 
\t \t  } 
 

 
\t \t }); 
 

 
\t \t }

.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"> 
 
\t \t \t \t <div class="text">Option 1</div> 
 
\t \t \t \t <div class="radioArea" data-id="upload1"> 
 
\t \t \t \t \t <input type="radio" name="gender" value="Image" checked> Image 
 
\t \t \t \t \t <input type="radio" name="gender" value="Text"> Text 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="textArea"> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="browseArea"> 
 
\t \t \t \t \t <input type="file" name="" class="" id=""> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="questionBlock"> 
 
\t \t \t \t <div class="text">Option 2</div> 
 
\t \t \t \t <div class="radioArea" data-id="upload2"> 
 
\t \t \t \t \t <input type="radio" name="gender" value="Image" checked> Image 
 
\t \t \t \t \t <input type="radio" name="gender" value="Text"> Text 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="textArea"> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="browseArea"> 
 
\t \t \t \t \t <input type="file" name="" class="" id=""> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="questionBlock"> 
 
\t \t \t \t <div class="text">Option 3</div> 
 
\t \t \t \t <div class="radioArea" data-id="upload3"> 
 
\t \t \t \t \t <input type="radio" name="gender" value="Image" checked> Image 
 
\t \t \t \t \t <input type="radio" name="gender" value="Text"> Text 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="textArea"> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="browseArea"> 
 
\t \t \t \t \t <input type="file" name="" class="" id=""> 
 
\t \t \t \t </div> 
 
\t \t \t </div>

來源

2017-09-14 11:27:13

這是您的預期輸出？ –

您可以在這裏找到工作的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

來源

2017-09-14 11:29:59 akbansa

如何在多個div中顯示隱藏單個區域

回答

相關問題