Button hide on click не работает

-1

Может ли кто-нибудь мне помочь? Я добавил код JS, чтобы сделать мою кнопку невидимым щелчком мыши и текст ниже видно .. Она работает на JS скрипку, но когда я загрузить его в Интернете не работает ... https://jsfiddle.net/kraftpanda/wdc7c2ue/Button hide on click не работает

<button id="theButton" class="btn">Click to View Phone Number</button> 
<div id="theDiv" style="display:none;"><p><h3>Call Us: + 91 96000 72298/044-65652298</p></div> 

$("#theButton").click(function(){ 
    $("#theButton").hide(); 
    $("#theDiv").show(); 
}) 

    .btn { 
    background: #d93470; 
    background-image: -webkit-linear-gradient(top, #d93470, #b82b53); 
    background-image: -moz-linear-gradient(top, #d93470, #b82b53); 
    background-image: -ms-linear-gradient(top, #d93470, #b82b53); 
    background-image: -o-linear-gradient(top, #d93470, #b82b53); 
    background-image: linear-gradient(to bottom, #d93470, #b82b53); 
    -webkit-border-radius: 28; 
    -moz-border-radius: 28; 
    border-radius: 28px; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 20px; 
    padding: 10px 20px 10px 20px; 
    text-decoration: none; 
} 

.btn:hover { 
    background: #3cb0fd; 
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 
    text-decoration: none; 
}

Извините за не предоставление более подробной информации ... http://exitoautomation.com является веб-сайтом .. Я добавил css в css-файл, HTML для индексирования страницы и скрипта в файл button.js и связал домашнюю страницу с ней, используя

источник

2015-10-07 Vijayaraj

Как вы сказали, в коде нет ничего плохого. Вам не хватает ссылки на jQuery, или вы не развертываете все необходимые файлы? Если вы откроете инструменты разработчика вашего браузера, есть ли ошибки, 404 или иначе? –

Это ваш код, упорядоченный в вашем документе? Поскольку javascript должен находиться между '' тегами и CSS должен быть внутри '' теги. jsFiddle просто делает это для вас, поэтому ваш код работает там. –

Извините, что не предоставил более подробной информации ... http://exitoautomation.com - это сайт. Я добавил css в css-файл, HTML для индексирования страницы и скрипта в файл button.js и связал домашнюю страницу с ней, используя – Vijayaraj

Вам необходимо обернуть свой Javascript код в <script> теги и ваши css в теги <style>, вот так:

<button id="theButton" class="btn">Click to View Phone Number</button> 
<div id="theDiv" style="display:none;"><p><h3>Call Us: + 91 96000 72298/044-65652298</p></div> 

<script type="text/javascript"> 
$("#theButton").click(function(){ 
    $("#theButton").hide(); 
    $("#theDiv").show(); 
}); 
</script> 

<style type="text/css"> 
    .btn { 
    background: #d93470; 
    background-image: -webkit-linear-gradient(top, #d93470, #b82b53); 
    background-image: -moz-linear-gradient(top, #d93470, #b82b53); 
    background-image: -ms-linear-gradient(top, #d93470, #b82b53); 
    background-image: -o-linear-gradient(top, #d93470, #b82b53); 
    background-image: linear-gradient(to bottom, #d93470, #b82b53); 
    -webkit-border-radius: 28; 
    -moz-border-radius: 28; 
    border-radius: 28px; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 20px; 
    padding: 10px 20px 10px 20px; 
    text-decoration: none; 
} 

.btn:hover { 
    background: #3cb0fd; 
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 
    text-decoration: none; 
} 
</style>

Кроме того, убедитесь, что у вас есть <html>, <head> и <body> теги, а также, или, короче говоря, ваш html. Если бы я был вами, я бы посмотрел учебник о html на youtube. Через несколько минут вы получите большую помощь. Если после развертывания он по-прежнему не работает, очистите кеш браузера и найдите ошибки на вкладках консоли и сети в консоли браузера.

EDIT: проблема заключается в том, что ваш код выполняется до того, как кнопка создана, и когда вы добавляете обработчик к кнопке, ее не существует. Позже кнопка создается без обработчика. Таким образом, вы можете изменить свой JS таким образом:

$(function() { 
    $("#theButton").click(function(){ 
     $("#theButton").hide(); 
     $("#theDiv").show(); 
    }); 
});

Обратите внимание, что вы переносите свою функциональность в загруженный обработчик.

источник

2015-10-07 16:01:07

Я заменил свой код на ваш, и он все еще не работает. Если я добавлю код непосредственно на отдельные страницы, то он будет работать, но если я позвоню, то это не будет – Vijayaraj

. «Если я позвоню», что вы имеете в виду? Используете ли вы скриптовые теги с внешним источником? Если да, уверены ли вы, что ваш путь правильный, и к файлу также можно получить доступ? –

Button hide on click не работает

ответ

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