Question

我一直在尝试使用jquery的parentUntil方法隐藏按钮，直到选中了一个收音机框，但我似乎无法让它工作。这可能是显而易见的事情，但现在已经困扰了我几天。任何人都可以看到我做错了什么。

＆＃13;

 (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);

＆＃13;

.hide {
    display: none;
}

.show {
    display: block !important;
}

＆＃13;

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

＆＃13;

JS Fiddle

Answer 1

.parentsUntil()获取“当前匹配元素集合中每个元素的祖先，最多但不包括选择器匹配的元素”。

尝试使用.closest()

Answer 2

试试这个代码段。我希望它能起作用

注意：从 - ＆gt;中移除隐藏类class =＆＃34; button-next hide＆＃34;

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

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

 });

Answer 3

这可能是你的意思吗？

如果值为空，则无需隐藏，因为您无法取消选择收音机。

如果要在某个值为空时隐藏，请使用.toggle($(this).val()!="")

＆＃13;

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

＆＃13;

.button-next { display:none }

＆＃13;

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

＆＃13;

Answer 4

所有善意明智的答案，伙计们，但他们都没有为我工作。最后我不得不使用

$（本）.closest（ '步骤-3 '）找到（' 按钮旁边。 '）的CSS（' 显示器'， '块'）;

无法让jquery的父母工作

4 个答案: