基於子元素的值更改父元素的CSS

Question

我在嘗試更改第二個div與類.form-group的可見性。使用jQuery我試圖抓住所選選項的值，然後根據該值更改前述的可見性。

如果該值爲0，則應該可見第二個div .form-group。我有這樣的困難，我都試過parents()和closest()，但是，我相信，我一直在執行這些正確

HTML

<div class="form-group"> 
    <label class="control-label required" for="userQuestions[1]">Do you have any dietary requirements? <span class="required">*</span></label><select class="form-control user-success" id="userQuestions_1" name="userQuestions[1]" required="required"> 
     <option value=""> 
      Please select 
     </option> 
     <option value="0"> 
      Yes 
     </option> 
     <option value="1"> 
      No 
     </option> 
    </select> 
</div> 

<div class="form-group"> 
    <label class="control-label" for="userQuestions[2]">Would you like to stay for after conference drinks?</label><select class="form-control" id="userQuestions_2" name="userQuestions[2]"> 
     <option value=""> 
      Please select 
     </option> 
     <option value="0"> 
      Yes 
     </option> 
     <option value="1"> 
      No 
     </option> 
    </select> 
</div> 

JQuery的

$(document).ready(function(){ 
    $('#useQuestion[1]').change(function(){ 
    if($(this).val() == '0'){ 
     $('.form-group:nth-of-type(2)').addClass('visible'); 
    } 
    }); 
}); 

CSS

.form-group:nth-of-type(2) { 
    visibility: hidden; 
} 
.visible { 
    visibility: visible !important; 
} 

Answer 1

在您的功能中取代('#useQuestion[1]')到('#userQuestions_1')

我只是修改你的代碼檢查這裏

$(document).ready(function(){ 
 
    $('#userQuestions_1').on('change',function(){ 
 
    if($(this).val() == '0'){ 
 
     $('.form-group:nth-of-type(2)').addClass('visible'); 
 
    } 
 
    }); 
 
});

.form-group:nth-of-type(2) { 
 
    visibility: hidden; 
 
} 
 
.visible { 
 
    visibility: visible !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="control-label required" for="userQuestions[1]">Do you have any dietary requirements? <span class="required">*</span></label><select class="form-control user-success" id="userQuestions_1" name="userQuestions[1]" required="required"> 
 
     <option value=""> 
 
      Please select 
 
     </option> 
 
     <option value="0"> 
 
      Yes 
 
     </option> 
 
     <option value="1"> 
 
      No 
 
     </option> 
 
    </select> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label class="control-label" for="userQuestions[2]">Would you like to stay for after conference drinks?</label><select class="form-control" id="userQuestions_2" name="userQuestions[2]"> 
 
     <option value=""> 
 
      Please select 
 
     </option> 
 
     <option value="0"> 
 
      Yes 
 
     </option> 
 
     <option value="1"> 
 
      No 
 
     </option> 
 
    </select> 
 
</div>