2016-09-04 5 views
-1

Ich habe versucht, die jquery elternsUntil-Methode zu verwenden, um eine Schaltfläche auszublenden, bis eine Radio-Box ausgewählt ist, aber ich kann nicht scheinen, um es zum Laufen zu bringen. Es ist wahrscheinlich etwas Offensichtliches, aber es nervt mich seit ein paar Tagen. Kann jemand sehen, was ich falsch mache?kann jquery parentsUntil nicht arbeiten

(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

Antwort

0

dieses Snippet Versuchen. Ich hoffe, es

Hinweis funktioniert: Entfernen Sie verstecken Klasse von -> class = „Taste-next verstecken“

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

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

}); 
1

.parentsUntil() bekommt „die Vorfahren jedes Element in dem aktuellen Satz von abgestimmten Elementen, bis zu , jedoch ohne das durch den Selektor abgeglichene Element ".

Versuchen .closest() statt

0

Dies ist wahrscheinlich, was Sie gemeint?

Keine Notwendigkeit zu verstecken, wenn Wert ist leer, da Sie ein Radio nicht abwählen können.

Wenn Sie ausblenden möchten, wenn irgendein Wert leer ist, verwenden .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>

0

Alle guten vernünftige Antworten, Jungs, aber keiner von ihnen für mich gearbeitet. Am Ende musste ich

$ (this) .closes ('. Step-3') verwenden. Find ('. Button-next'). Css ('display', 'block');