2016-09-16 8 views
0

選択したオプションに基づいて、divを非表示にします。長い話が短い。jqueryを非表示にする - 動作しませんが、フィドルでうまく動作します

  • レベル1および2から

JSFIDDLE で細かい動作しますが、私は問題はのCDNとなり推測 "custompanel" という名前のショーのdiv - divの名前の "custompanel"

  • カスタムを隠します。把握することはできません。助けが必要。

    HTML 
    <head> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <title>Password Generator</title> 
    <!-- Latest compiled and minified CSS --> 
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    
    <link rel="stylesheet" type="text/css" href="screen.css" media="screen, projection" /> 
    <script> 
    $(document).ready(function() { 
        $('#generator-mixcase').on('change',function(){ 
         if($(this).val() == 'custom') { 
          $('.custompanel').show(); 
         } else { 
          $('.custompanel').hide(); 
         } 
        }); 
    }); 
    </script> 
    </head> 
    

    問題:カスタムを選択すると、divは表示されません。以下の画像を見つけてください。 browser page

    Inspect element showed this exception

    例外がjQueryのCDNにおけるエラーを示します。私のjqueryのCDNが間違っていますか?

    "Error: Failed to execute 'querySelectorAll' on 'Element': '*,:x' is not a valid selector.↵  
    at Error (native)↵ at https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:10694↵  
    at ia (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:7550)↵ 
    at fa.setDocument (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:10432)↵  
    at https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:22250↵  
    at https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:22970↵  
    at https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:207↵  
    at https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:212" 
    
  • +0

    これまではローカルでテストされていましたが、これまでのところ問題はありません:http://pastebin.com/Wv029pEVコンソールのエラーを確認してください。 – yuriy636

    +0

    それは壊れたバージョンでは、表示されている - または非表示のパネルが隠れている? – Sam0

    +0

    コード実行時に要素が存在しますか?または彼らは後に挿入されていますか?コンソールにエラーがありますか?ここではあまり働かない – charlietfl

    答えて

    0

    私は以前このエラーがありましたが、ブートストラップインクルードを削除してみてください。

    jQuery(document).ready(function($) 
    

    代わりの

    $(document).ready(function() 
    

    それが動作検証:

    +0

    Bootstrapを本当に使いたい場合はどうなりますか? – Barmar

    +0

    はい!私はブートストラップが必要です。モバイルフレンドリーな画面をクライアントから要求しました –

    +0

    ブートストラップを削除しても動作しませんでした –

    0

    はこれを試してみてください!

    依存コンポーネントをロードする前にjQueryをロードする必要があります。

    関連する問題