Показать скрытое изображение с jQuery

FYI: Я изучаю, как кодировать онлайн-учебник. В этом уроке мы изучаем javascript и jQuery. Дело в том, чтобы:Показать скрытое изображение с jQuery

Скрыть изображение с styles.css
```
img { 
display: none; 
} 
```

Показать изображение с scripts.js

$(function() { 
$("p").click(function() { 
$("img").show(); 
}); 
});

HTML выглядит следующим образом:

<!DOCTYPE html> 
<html> 
<head> 
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"> 
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all"> 
<script src="js/jquery-1.9.1.js"></script> 
<script src="js/scripts.js"></script> 
<title>Peek-a-boo</title> 
</head> 
<body> 
<div class="container"> 
    <h1>Peek-a-boo</h1> 

    <p>Let's play peek-a-boo. Click here to see the surprise!</p> 

    <img src="img/walrus.jpg"> 
</div> 
</body> 
</html>

ЧТО РАБОТАЕТ:

HTML-страница выглядела прекрасно. Работает над бутстрапом css. Изображение появилось отлично. Скрипт css спрятал изображение просто отлично.

ЧТО НЕ РАБОТАЕТ:

Jquery не показывает изображение, когда я нажимаю пункт.

Я дошел до того, что копировал и вставлял учебник в возвышенный текст 2, но он все еще не работает. Я на 99% уверен, что все находится в правильной папке.

enter image description here

Любые идеи относительно того, что может быть проблема ?!

источник

2013-11-17 Benjamin Dunphy

В вашем коде нет ошибок. Любые сообщения в консоли? Можете ли вы воспроизвести это в JSFiddle? –

проверить это http://jsfiddle.net/c5D2y/ –

Вы уверены, что URL-адрес изображения действительно работает? Удалите 'display: none' и посмотрите, показывает ли это. – Michelle

Ваш код совершенен. Единственной проблемой, которая была обнаружена/поймана jsfiddle, был сломанный тег img.

Совет! Если вы не можете загрузить изображение, вы можете просмотреть ошибку, которая была обнаружена на консоли. Это поможет вам узнать, где была ошибка. Он скажет вам, не было ли изображение обнаружено, или js не был загружен или какая-либо другая ошибка. Поэтому зайдите на консоль и посмотрите на любые сообщения.

Если вы уверены, что ошибка указана в коде, попробуйте написать ее в скрипке и предоставить ее. Давайте отредактируем его! :)

Чтобы проверить запуск кода JQuery это:

$(document).ready(function() { 
    $('body').css({ 
    'font-size': '2em' 
    }) 
})

Это englargen текст 2em. Это просто тест, чтобы знать, что ваш код работает или нет :) Если ничего не происходит, проверьте свою jQuery-ссылку.

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

Указал на Michelle, вы должны связать JS, как

<script src="js/jquery-1.10.2.js"></script>

Почему?Поскольку вам нужно написать точное имя для файлов, которые будут связаны, в противном случае вы получите ошибку 404; не найдено. Поэтому вам нужно написать код, как указано выше.

Вы не заметили в консоли консоль 404? Просто добавьте вышеуказанный код и удалите предыдущий код, и вы получите код.

http://jsfiddle.net/afzaal_ahmad_zeeshan/RBL2X/1/

источник

2013-11-17 15:05:10

Спасибо Afzaal, но это не устранило проблему. –

Итак, убедитесь, что файлы связаны отлично. Поскольку ваш код просто идеален :) Не беспокойтесь об этом, его работе. –

Я думаю, что большинство браузеров автоматически закрывают тег img во время обработки DOM. –

Я не вижу прикрепленный скриншот вашей структуры папок, поэтому я не могу подтвердить, но мое единственное предположение, что образ пути неправильно. Подтвердите, что вы можете отобразить изображение, удалив css, который скрывает его. Вы даже можете подтвердить, что jQuery работает, меняя .show() на .hide(), или .toggle()

источник

2013-11-17 15:07:30

Спасибо за ответ, Уолтер. У меня недостаточно очков репутации, чтобы добавить изображение. Поскольку изображение отображается правильно и скрыто скриптами.css, путь изображения не является проблемой. Вы можете найти изображение в папках с файлами здесь http://i.imgur.com/HCacnJ9.png –

Добавление изображения означает просто нажать CTRL + G, появится всплывающее окно. Отправьте изображение мне, я включите его :) Не волнуйтесь .. дайте мне ссылку на мой ответ. –

Можете ли вы предоставить скриншот папки img? –

Показать скрытое изображение с jQuery

ответ

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