微信小程序循環獲取input和單選判斷

在循環中獲取每個input的值

 

當涉及問卷時，這里的填空題，問題1，textarea框是一整個部分，可以通過循環輸出相同的模塊，問題1，問題2 ，問題...， 問題的數目是根據后台數據決定的，需要獲取每個問題對應的答案

 <block wx:for="{{circledetail[0].fullinquestion}}" wx:key="*this">
    <view class="mainSection_input" >
     <text>填空題:</text>
     <view class="mainSection_input_view" >{{item}}</view>
     <textarea bindinput="getFillInInf" data-index="{{index}}"></textarea>
    </view>
 </block>

給每個textarea綁定一個事件，獲取textarea輸入的內容，通過自定義屬性把index傳到js,表示是第幾個問題對應的答案，這里的fillInAnswer是一個數組，用於存儲所有的問題答案，最終結果是fillInAnswer['問題1的答案'，'問題2的答案'，...]

getFillInInf:function(e){
    let index = "fillInAnswer[" + e.currentTarget.dataset.index + "]"
    let value = e.detail.value
    this.setData({
      [index]: value
    })
  },

在循環中獲取每個單選的結果的值

 

判斷與input類似，但是需要兩層循環來表示，第一層循環用於外層大的組件，即是否題，是否題的題目，是否選項，第二層是是否由數組循環表示出來，限制單選

 

<block wx:for="{{circledetail[0].justisyquestion}}" wx:key="*this" wx:for-index="findex">
   <view class="mainSection_input mainSection_input_justify">
     <text>是否題:</text>
     <view class="mainSection_input_view">{{item.justifycontent}}</view>
         <block wx:for="{{classChoose}}" wx:key="*this" >
             <view  class="mainSection_checkout  {{justifyAnswer[findex] == index ? 'classChoosed' : ''}} justifyChoose " 
catchtap="justifyAnswer" data-index="{{index}}"data-findex="{{findex}}">{{item}}</view>
        </block>
   </view>
   </block>
 

 

 

classChoose: ['是', '否'],

 

使用fidex將父組件對應的findex表示出來，表示第幾個是否題，對應的答案根據里層的第二層循環結果表示，index=0表示是，index=1，表示否，利用數組將結果保存下來，justifyAnswer['1','0',...],再進行判斷，如果當前index就是被點擊的index,那么就加一個特殊樣式classChoosed，否則不加，假設第一個是否題，他在數組中的位置是第一個，索引下標是0，假設第一個是否題答案是 ‘是’，那么此時數組justifyAnswer=['0'],在是否顯示樣式時會判斷justifyAnswer[0]=0? 數組中第一個值是否為0，此時是0，故第一個是的選項有特殊的框，判斷justifyAnswer[0]=1? 答案否定，沒有特殊的框。

 

  // 選擇分類
  justifyAnswer:function(e){
    let findex = e.currentTarget.dataset.findex;
    let index = "justifyAnswer[" + findex + "]";
    this.setData({
      [index]: e.currentTarget.dataset.index
    })
  },

 

 第一次寫博客，請大家多多指正！