#jquery #html #asp.net-mvc #materialize
#jquery #HTML #asp.net-mvc #материализовать
Вопрос:
Я разрабатываю веб-приложение mvc в asp.net , но мой слайдер не работает. Когда я пробую тот же код, используя html, он работает. Вот моя часть кода
<head>
<link href="~/Content/css/materialize.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Content/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="~/Content/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.slider').slider({ full_width: true });
});
</script>
</head>
<body>
<div class="slider">
<ul class="slides">
<li>
<img class="responsive-img" src="~/Content/img/hotel1.jpeg" />
</li>
<li>
<img class="responsive-img" src="~/Content/img/hotel2.jpeg" />
</li>
</ul>
</div>
</body>
Когда я проверяю код с помощью инструментов разработчика Chrome, он говорит
Uncaught TypeError: $(...).slider is not a function
а также
Uncaught ReferenceError: $ is not defined(anonymous function) @ materialize.min.js:6
Комментарии:
1.
$ is not defined
означает, что jQuery не инициализирован должным образом или не существует на стороне клиента. Проверьте, существует ли библиотека jQuery, или используйте<script type="text/javascript" src="@Url.Content("~/Content/jquery/jquery-2.1.1.min.js")">
для указания относительного пути.2. Исправлена ошибка Jquery ReferenceError. Теперь проблема со слайдером
3. Поскольку ваш код инициализации Materialize выглядит нормально, попробуйте изменить значение пути атрибута src во втором теге скрипта с
"@Url.Content("~/Content/js/materialize.min.js")"
помощью . Также включите библиотеку пользовательского интерфейса jQuery, если она все еще не работает.
Ответ №1:
Проблема в том, что теги вашего скрипта, ваш скрипт должен быть внизу вашей страницы, вот так
<head>
<link href="~/Content/css/materialize.min.css" rel="stylesheet" />
</head>
<body>
<div class="slider">
<ul class="slides">
<li>
<img class="responsive-img" src="~/Content/img/hotel1.jpeg" />
</li>
<li>
<img class="responsive-img" src="~/Content/img/hotel2.jpeg" />
</li>
</ul>
</div>
<script type="text/javascript" src="~/Content/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="~/Content/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.slider').slider({ full_width: true });
});
</script>
</body>
Ответ №2:
Проблема заключалась в нежелательной ссылке на jquery и bootstrap. после того, как я удалил его из файла, он работает нормально.