はjquery parentsを取得できません.Utilは動作しません。

Question

jquery parentsUntilメソッドを使用して、ラジオボックスが選択されるまでボタンを隠そうとしましたが、動作させられないようです。たぶん明白なことだと思うが、今は2,3日間私を悩ませている。誰でも私が間違っていることを見ることができます。

(function($) { 
 
$(function(){ 
 
    $('.last-item').change(function() { 
 
    if($(this).val() != '') { 
 
     $(this).parentsUntil('.step').find('.button-next').removeClass('hide'); 
 
     $(this).parentsUntil('.step').find('.button-next').addClass('show'); 
 
     console.log("changing the last item"); 
 
    } 
 

 
    }); 
 

 
}); 
 
})(jQuery);

.hide { 
 
    display: none; 
 
} 
 

 
.show { 
 
    display: block !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="step"> 
 
<h1>Step 3 - Personal</h1>      
 
    <div class="input-wrapper radio no-feedback"> 
 
    <div class="row no-gutter content-position-outer"> 
 
     <div class="col-md-6 content-center-inner"> 
 
     <label for="gender">What gender are you? <sup>*</sup></label> 
 
     </div> 
 
     <div class="col-md-6 content-center-inner"> 
 
     <div class="row"> 
 
      <div class="col-md-5 col-md-offset-2"> 
 
      <label class="radio-sex" for="gender_male"> 
 
       <input class="sr-only last-item" type="radio" placeholder="Male" name="gender" value="Male" id="gender_male" required="required" /> 
 
       <div class="radio-img radio-img-sex-male"></div> 
 
              Male 
 
             </label> 
 
      </div> 
 
      <div class="col-md-5"> 
 
      <label class="radio-sex" for="gender_female"> 
 
       <input class="sr-only last-item" type="radio" placeholder="Female" name="gender" value="Female" id="gender_female" required="required" /> 
 
       <div class="radio-img radio-img-sex-female"></div> 
 
              Female 
 
      </label> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-3"> 
 
     <a href="" class="button-prev" data-progress="2" data-step="step-2">Previous</a> 
 
    </div> 
 
    <div class="col-md-3 col-md-push-6"> 
 
     <a href="" class="button-next hide" data-progress="4" data-step="step-4">Next</a> 
 
    </div> 
 
    </div>    
 
</div>

JS Fiddle

Answer 1

このスニペットを試してみてください。私はそれが

注意を働くことを願っています：から隠すクラスを削除 - >クラス=「ボタンの横隠す」

$(function(){ 
    $('.button-next').hide(); 
    $('input[type="radio"]').click(function() { 
     if($(this).prop('checked') == true) { 
      $('.button-next').show();   
     } 

     else { 
      $('.button-next').hide(); 
     } 
    }); 

}); 

Answer 2

.parentsUntil()がまで、「マッチした要素の現在のセット内の各要素の先祖を取得しますであるが、のセレクタによって一致する要素は含まれていない。

ではなく

Answer 3

これは、あなたが何を意味するのかと思われる.closest()てみ？

ラジオの選択を解除できないため、値が空の場合は非表示にする必要はありません。

あなたには、いくつかの値が空の場合に非表示にしたい場合は、.toggle($(this).val()!="")

(function($) { 
 
    $(function() { 
 
    $('.last-item').on("click",function() { // click assumes radio as last item 
 
     $(this).closest("div.step").find('.button-next').show(); 
 
    }); 
 
    }); 
 
})(jQuery);

.button-next { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="step"> 
 
    <h1>Step 3 - Personal</h1> 
 
    <div class="input-wrapper radio no-feedback"> 
 
    <div class="row no-gutter content-position-outer"> 
 
     <div class="col-md-6 content-center-inner"> 
 
     <label for="gender">What gender are you? <sup>*</sup> 
 
     </label> 
 
     </div> 
 
     <div class="col-md-6 content-center-inner"> 
 
     <div class="row"> 
 
      <div class="col-md-5 col-md-offset-2"> 
 
      <label class="radio-sex" for="gender_male"> 
 
       <input class="sr-only last-item" type="radio" placeholder="Male" name="gender" value="Male" id="gender_male" required="required" /> 
 
       <div class="radio-img radio-img-sex-male"></div> 
 
       Male 
 
      </label> 
 
      </div> 
 
      <div class="col-md-5"> 
 
      <label class="radio-sex" for="gender_female"> 
 
       <input class="sr-only last-item" type="radio" placeholder="Female" name="gender" value="Female" id="gender_female" required="required" /> 
 
       <div class="radio-img radio-img-sex-female"></div> 
 
       Female 
 
      </label> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-3"> 
 
     <a href="" class="button-prev" data-progress="2" data-step="step-2">Previous</a> 
 
    </div> 
 
    <div class="col-md-3 col-md-push-6"> 
 
     <a href="" class="button-next hide" data-progress="4" data-step="step-4">Next</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

にすべての良い賢明な答え、みんなを使用しますが、それらのどれも私のために働いていません。最後に私は使用しなければならなかった

$（this）.closest（ '。step-3'）find（ '。