2016-05-20 8 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 мобильны, как это буквально единственное различие между эти два кода. Или я делаю что-то не так?

+0

Что говорит ваша консоль разработчика? Кстати, попробуйте лучший учебный сайт. – Raptor

+0

Хорошо работает для меня .. Проверьте свой браузер 'console' .. –

+0

Я проверил свою консоль, и она показалась прекрасной, но по какой-то странной причине это просто не работает. Мой код работает отлично для вас, ребята? –

ответ

0

Я только что сделал несколько примеров на этом Codepen. По-видимому, распространенная проблема заключается в том, что входные кнопки кнопок являются незаменимыми (похоже, это связано с jQuery Mobile). Вы можете попробовать несколько других способов добиться того, что это вы пытаетесь сделать:

  1. Использовать <button> тег вместо
  2. Используйте <a> тег, установив атрибут data-role в button так она принимает стиль кнопки.
+0

Да. Это было! Благодарю. Теперь он переключился на кнопки и теперь работает. JQuery Mobile, похоже, глючит. –

Смежные вопросы