2016-05-20 7 views
0

これは基本的にw3Schoolで動作しますが、私の実際の環境では動作しません。ここでは、コードは次のようになります。ここでは.fade私のコードでは動作しませんが、w3Schoolで同じコードでうまく動作します。どうして?

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <title>Vecta Corp. Mobile</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
      <script> 
    $(document).ready(function(){ 
     $("#5").click(function(){ 
      $("#yourview").fadeTo(1000, 0.05); 
     }); 
    }); 

     </script> 
    </head> 

    <body> 
    <section data-role="content"> 

      <h2>Dr. Tint SolarPill Tint</h2> 
      <h3>See how SolarPill looks from inside your tinted car</h3> 

      <p><img alt="" src="images/tintshade.png" id="yourview" style="width:347px;"></p> 
<p style="width:350px;"> 
<input id="5" value="5%" style="font-size:12px;width: 36px;margin-left: 18px;" type="button"> 

</p> 


     </section> 
    </div> 
</body> 
</html> 

は次のとおりです。w3school linkし、その中にこのコードを貼り付けて、自分で試してみてください。それは文字通りの唯一の違いであるよう

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#5").click(function(){ 
     $("#yourview").fadeTo(1000, 0.4); 
    }); 
}); 
</script> 
</head> 
<body> 

<p><img alt="" src="http://www.mobile-tinting.com/img.png" id="yourview" style="width:347px;"></p> 

<input id="5" value="5%" style="font-size:12px;width: 36px;margin-left: 18px;" type="button"> 
</body> 
</html> 

はjqueryの携帯と競合このです2つのコード。あるいは私はここで何か間違っているのですか?

+0

デベロッパーコンソールには何が通知されますか? btw、より良いチュートリアルのWebサイトを試してください。 – Raptor

+0

私のためにうまくいきます..ブラウザの 'console'を確認してください。 –

+0

私のコンソールを確認しても問題はありません。あなたのコードはうまく動作しますか? –

答えて

0

私はちょうどこれについていくつかの例を作ったCodepen。ボタンの入力が解除できないという共通の問題があるようです(jQuery Mobileによるものと思われます)。あなたがやろうとしている何を達成するためのいくつかの他の方法を試すことができます。

  1. ので、それはボタンのスタイルを採用しbuttondata-role属性を設定し、<a>タグを使用し
  2. 代わり<button>タグを使用してください。
+0

はい。これだった!ありがとう。ボタンに変更され、現在動作しています。 Jqueryモバイルはバグが多いようです。 –

関連する問題