Форум

KennyMorkovka · #1 (**permalink**) 05.04.2017, 19:39

Объясните пожалуйста почему браузер переходит по ссылке вместо того чтобы заменять src на href?
$(document).ready(function () {
$("#small a").click(function(event) {
$("#big img").hide().attr("src",$(this).attr("href"));
$("#big img").load(function() {
$(this).fadeIn(2000);
});
event.preventDefault();
});
});

рони · #2 (**permalink**) 05.04.2017, 20:02

KennyMorkovka,
потому что код с ошибками, а значит не рабочий

KennyMorkovka · #3 (**permalink**) 05.04.2017, 21:07

Где ошибки?

KennyMorkovka · #4 (**permalink**) 05.04.2017, 21:11

ошибки есть attr но погоды это не меняет, preventdefault все равно не работает

Rise · #5 (**permalink**) 05.04.2017, 21:27

KennyMorkovka, какой версия jquery, если 3, то там метод .load() как событие удален, и preventDefault лучше писать в начале, а не в конце.

рони · #6 (**permalink**) 05.04.2017, 21:47

KennyMorkovka,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <script>
$(function() {
$("#big img").on("load", function() {
            $(this).fadeIn(2E3)
        });
$("#small a").click(function(event) {
        event.preventDefault();
        $("#big img").hide().attr("src", $(this).attr("href"))
    })
});
  </script>
</head>

<body  id="small">
<a href="https://www.w3schools.com/howto/img_fjords.jpg">click</a>
<a href="http://bigtiger.ru/sites/default/files/styles/697x340_new_slider/public/offer/shutterstock_56606173.jpg">click</a>
<!-- The Modal -->
<div id="big" class="modal">

  <img class="modal-content" id="img01">

</div>

</body>
</html>

KennyMorkovka · #7 (**permalink**) 06.04.2017, 16:52

Спасибо

KennyMorkovka · #8 (**permalink**) 06.04.2017, 16:55

Сообщение от рони

KennyMorkovka,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <script>
$(function() {
$("#big img").on("load", function() {
            $(this).fadeIn(2E3)
        });
$("#small a").click(function(event) {
        event.preventDefault();
        $("#big img").hide().attr("src", $(this).attr("href"))
    })
});
  </script>
</head>

<body  id="small">
<a href="https://www.w3schools.com/howto/img_fjords.jpg">click</a>
<a href="http://bigtiger.ru/sites/default/files/styles/697x340_new_slider/public/offer/shutterstock_56606173.jpg">click</a>
<!-- The Modal -->
<div id="big" class="modal">

  <img class="modal-content" id="img01">

</div>

</body>
</html>

Спасибо. Сейчас скрипт работает, буду разбираться

Форум

Справочник

Discord чат

Курсы javascript