jQueryのコンソールでの作業が、ウェブサイト

Question

をロードしていないとき、これは完全にコンソールで働いているコードです：

jQuery(".cf7_wrap_com li").each(function(){ 
     jQuery(this).find(".first_univer input").click(function(){ 
      var label1 = jQuery(this).parent().find("label").html();  
      if(jQuery(this).is(":checked")) { 
        jQuery(this).parent().find(".first_high").show(); 
         jQuery(".cf7_wrap_com li").not(jQuery(this).parent().parent()).each(function(){   
          jQuery(this).find(".first_high").hide();  
         }); 
          } 

      else {} 
      }); 
     }); 

、以下のコードは、私は私のカスタムのjsファイルに保存されているものですし、ウェブサイトの負荷

に取り組んでいません

jQuery(document).ready(function($){ 
    jQuery(window).bind("load", function() { 
    jQuery(".cf7_wrap_com li").each(function(){ 
     jQuery(this).find(".first_univer input").click(function(){ 
      var label1 = jQuery(this).parent().find("label").html();  
      if(jQuery(this).is(":checked")) { 
        jQuery(this).parent().find(".first_high").show(); 
         jQuery(".cf7_wrap_com li").not(jQuery(this).parent().parent()).each(function(){   
          jQuery(this).find(".first_high").hide();  
         }); 
          } 

      else {} 
      }); 
     }); 
    }); 
}); 

このコードをトリミングすることが可能かどうかを知りたければ、不要なものを追加した可能性もあります。

私は2つのラジオボタン（デフォルトでは非アクティブ）を使用しています。ユーザーがどちらかをクリックすると、短い形式が開きます。

ここでは画像です：

が、これはhtml次のとおりです。

<h1>What type of student?</h1> 
<ul class="cf7_wrap_com first_use"> 
<li> 
<div class="highschoolform first_univer"><input id="#school" name="School" type="radio" value="highschool" /> <label for="highschool">High School</label> 
<div class="cf7_wrap_hs first_high">[contact-form-7 id="3552" title="High school"]</div> 
</div> 
</li> 
<li> 
<div class="unversityform first_univer"><input id="#University" name="School" type="radio" value="University" /> <label for="University">University</label> 
<div class="cf7_wrap_uni first_high">[contact-form-7 id="3553" title="University"]</div> 
</div> 
</li> 
</ul> 

Answer 1

最も近いと兄弟を使用

ラジオにクラスを与えます

$(function() { 
 
    $(".school").on("click",function() { 
 
    $(this).closest("ul").find(".first_high").hide(); 
 
    $(this).siblings(".first_high").show(); 
 
    }); 
 
});

.first_high { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>What type of student?</h1> 
 
<ul class="cf7_wrap_com first_use"> 
 
    <li> 
 
    <div class="highschoolform first_univer"> 
 
     <input id="#school" class="school" name="School" type="radio" value="highschool" /> 
 
     <label for="highschool">High School</label> 
 
     <div class="cf7_wrap_hs first_high">[contact-form-7 id="3552" title="High school"]</div> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="unversityform first_univer"> 
 
     <input id="#University" class="school" name="School" type="radio" value="University" /> 
 
     <label for="University">University</label> 
 
     <div class="cf7_wrap_uni first_high">[contact-form-7 id="3553" title="University"]</div> 
 
    </div> 
 
    </li> 
 
</ul>