URLで区切りを表示、デフォルト設定

Question

何らかの理由で、私の脳が今朝機能していないため、何かが欠けています。私は、URLのオプション値に基づいてdivを表示しています。何もオプションが設定されていない何らかの理由を除いて、すべて正常に動作しますが、デフォルトは機能しません。私は "TypeError：nullのプロパティ '1'を読み取ることができません"エラーが表示され、すべてのdivを表示しています。

   <div class="single-listing"> 
        <div id="info" class="boxes"> 
         <h1>DEFAULT BOX</h1> 
        </div> 

        <div id="checkout" class="boxes"> 
         <h1>Checkout</h1> 
        </div> 

        <div id="recommend" class="boxes"> 
         <h1>Recommend Us?</h1> 
        </div> 

        <div id="recommend-no" class="boxes"> 
        </div> 

        <div id="recommend-yes" class="boxes"> 
        </div> 
       </div> 

ここにはJavaScriptがあります。これはWordpress内で行われているので、Jquery用のラッパー関数があります。

あなたのコードでIF文を持っている必要があり、デフォルトを動作させるための

  <script type="text/javascript"> 
       jQuery(document).ready(function($) { 
        $(document).ready(function() { 
         var option = 'info'; 
         var url = window.location.href; 
         option = url.match(/option=(.*)/)[1]; 
         showDiv(option); 
        }); 
        function showDiv(option) { 
         $('.boxes').hide(); 
         $('#' + option).show(); 
        } 
       }); 
      </script> 

Answer 1

確認url.matchことを確認してください（。/オプション=（*）は/）nullではありません配列のインデックスにアクセスする前に。

jQuery(document).ready(function($) { 
 
    $(document).ready(function() { 
 
     var option = 'info'; 
 
     var url = window.location.href; 
 
     var url_option = url.match(/option=(.*)/); 
 
     if (url_option != null) 
 
      option = url_option[1]; 
 
     showDiv(option); 
 
    }); 
 
    function showDiv(option) { 
 
     $('.boxes').hide(); 
 
     $('#' + option).show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="single-listing"> 
 
    <div id="info" class="boxes"> 
 
     <h1>DEFAULT BOX</h1> 
 
    </div> 
 

 
    <div id="checkout" class="boxes"> 
 
     <h1>Checkout</h1> 
 
    </div> 
 

 
    <div id="recommend" class="boxes"> 
 
     <h1>Recommend Us?</h1> 
 
    </div> 
 

 
    <div id="recommend-no" class="boxes"> 
 
    </div> 
 

 
    <div id="recommend-yes" class="boxes"> 
 
    </div> 
 
</div>

Answer 2

：

 <script type="text/javascript"> 
      jQuery(document).ready(function($) { 
       $(document).ready(function() { 
        var option = 'info'; 
        var url = window.location.href; 
        option = url.match(/option=(.*)/)[1]; 
        if(option!=null){ 
         showDiv(option); 
        } 
        else{ 
         showDiv('info'); 
        } 
       }); 
       function showDiv(option) { 
        $('.boxes').hide(); 
        $('#' + option).show(); 
       } 
      }); 
     </script>