是/否按鈕

Question

我使用autoform來問一個是的，沒問題，我想有兩個按鈕，一個說是，另一個說不。通過使用aldeed:autoform-bs-button-group-input，我可以在我的模式中使用下面的代碼生成兩個按鈕，但這並不能單獨設置每個按鈕的樣式。例如，我希望一個是綠色的，一個是紅色的。我怎樣才能做到這一點？

路徑：Schema.js

answer: { 
     type: String, 
     optional: true, 
     allowedValues: ['Yes', 'No'], 
     autoform: { 
       type: "select-radio", 
       options: function() { 
       return [ 
       {label: "Yes", value: 'Yes'}, 
       {label: "No", value: 'No'}, 
       ]; 
      } 
     } 
    } 

路徑：template.js

{{#autoForm collection="questions" id=makeUniqueID doc=this type="update" autosave=true}}  
{{> afQuickField name="answer" type="select-radio" template="buttonGroup" label=false}} 
{{/autoForm}} 

Answer 1

首先讓我們添加一個class屬性自動窗體：

{{#autoForm class="YesNoStyles" collection="questions" id=makeUniqueID doc=this type="update" autosave=true }}  
{{> afQuickField name="answer" type="select-radio" template="buttonGroup" label=false}} 
{{/autoForm}} 

這被傳遞到產生<form>標籤，這是我們可以檢查並看到它看起來像這樣：

<form class="YesNoStyles" id="makeUniqueID" novalidate="novalidate"> 
    <div class="form-group"> 
    <div class="af-radio-group" data-schema-key="answer"> 
     <div> 
     <label> 
      <input type="radio" value="Yes" name="answer" id="6gWEaAr2ZWQzqtj7H"> Yes</label> 
     </div> 
     <div> 
     <label> 
      <input type="radio" value="No" name="answer" id="6gWEaAr2ZWQzqtj7H"> No</label> 
     </div> 
    </div> 
    <span class="help-block"></span> 
    </div> 
</form> 

現在有兩個選擇：

1. 找到input[value="Yes"]和input[value="No"]元素，然後應用CSS到他們的父元素。然而這不能用css來完成，因爲css選擇器不允許選擇父元素。流星的onRendered回調允許我們做到以下幾點：

   Template.Question.onRendered(function(){ 
       $('input[value="Yes"]')[0].parentElement.classList.add('yes'); 
       $('input[value="No"]')[0].parentElement.classList.add('no'); 
   }); 
   

   具有以下定義的CSS類：

   .yes { 
       background-color: green; 
   } 
   
   .no { 
       background-color: red 
   } 
   

2. :nth-child(i) CSS選擇器，不需要任何的JavaScript！

   定義以下CSS規則（開始用我上面添加的類）：

   .YesNoStyles > div > div > div:nth-child(1) > label { 
       background-color: green; 
   } 
   
   .YesNoStyles > div > div > div:nth-child(2) > label { 
       background-color: red; 
   }