Таргетинг только один выбор в JQuery не все из них

Question

Таргетинг только один переключатель (следующий DIV после выбора) в JQuery не все из них

Это работает, кроме него показывает все тумблера, когда я только хочу, чтобы показать только под ним.

Heres HTML-

$(".toggle").hide(); 
$(function() { 
    $(".binary").change(function() { 
    if ($(this).val() == "0"){ 
     $(".toggle").hide(); 
    } else { 
     $(".toggle").show(); 
    } 
    $("#pane").customScrollbar("resize", true); 
    }); 
}); 

Heres HTML-

    <div class="option checkbox"> 
         <label class="field_wrap"> 
          <div class="label">1</div> 
          <div class="field"> 
           <select class="binary" name="option_1"> 
            <option value="0"></option> 
            <option value="1"></option> 
           </select> 
          </div> 
         </label> 
        </div> 
        <div class="toggle"> 
        toggle 1 
        </div> 
        <div class="option checkbox"> 
         <label class="field_wrap"> 
          <div class="label">1</div> 
          <div class="field"> 
           <select class="binary" name="option_1"> 
            <option value="0"></option> 
            <option value="1"></option> 
           </select> 
          </div> 
         </label> 
        </div> 
        <div class="toggle"> 
        toggle 2 
        </div> 

Answer 1

Вы можете использовать .next() метод JQuery в.

$(function() { 
    $(".binary").change(function() { 
     if($(this).val() == 0){ 
      $(this).parents("div.checkbox").next('.toggle').hide(); 
     } else { 
      $(this).parents("div.checkbox").next('.toggle').show(); 
     } 
     $("#pane").customScrollbar("resize", true); 
    }); 
}); 

Адрес Demo Fiddle.

Answer 2

Вы должны попробовать: первый селектор

$(function() { 
    $(".binary:first").change(function() { 
     if($(this).val() == "0"){ 
      $(this).next(".toggle").hide(); 
     } else { 
      $(this).next(".toggle").show(); 
     } 
     $("#pane").customScrollbar("resize", true); 
    }); 
}); 

Answer 3

попробовать следующий

$(".toggle").hide(); 
$(function() { 
    $(".binary").change(function() { 
    if ($(this).val() == "0"){ 
     $(this).parent().parent().parent().next().hide(); 
    } else { 
     $(this).parent().parent().parent().next().show(); 
    } 
    $("#pane").customScrollbar("resize", true); 
    }); 
}); 

Answer 4

Это похоже на @ ответ Ганеши, но имеет большую специфику, что может быть важным в вашем сценарии.

$(".toggle").hide(); 

$(function() { 
    $(".binary").change(function() { 
     if ($(this).val() == "0") { 
      console.log($(this).closest('div.option.checkbox').length); 
      $(this).closest('div.option.checkbox').next(".toggle").hide(); 
     } else { 
      $(this).closest('div.option.checkbox').next(".toggle").show(); 
     } 
     $("#pane").customScrollbar("resize", true); 
    }); 
});