微信小程序循环获取input和单选判断

时间：2024-02-22 12:06:42

在循环中获取每个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
    })
  },

 

 第一次写博客，请大家多多指正！

 

相关文章