子要素の値に基づいて親要素のCSSを変更する

Question

クラス.form-groupで2番目のdivの可視性を変更しようとしています。 jQueryを使用して、私は選択されたオプションの値を取得しようとしているし、その値に基づいて上記の可視性を変更します。

値が0の場合は、2番目の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')

に私はちょうどあなたのjQueryのセレクタが間違っている、ここで

$(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>