Как преобразовать этот jquery в javascript?
Я использую этот код jquery и хочу преобразовать его в javascript. Я недавно начал javascript и немного разбираюсь в jquery.
<script src = "https://code.jquery.com/jquery-2.2.4.js"></script>
<script type = "text/javascript">
$(document).ready(function () {
$(".row a").click(function (e) {
e.preventDefault();
$(".imgBox img ").attr("src", $(this).attr("href"));
});
});
</script>
Вы можете выполнить онлайн-поиск этих функций jQuery, например «функция jQuery Икс в ванильном Javascript».
Это еще один полезный ресурс: tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript
Мой любимый инструмент для поиска эквивалента JavaScript — youmightnotneedjquery.com, но это не автоматический инструмент, и вам нужно немного знать JavaScript, чтобы конвертировать
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Эквивалент в ванильном JavaScript (я добавил немного HTML, чтобы он работал):
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll(".row a").forEach(function(elem) {
elem.addEventListener("click", function (e) {
e.preventDefault();
document.querySelector(".imgBox img").src = elem.href;
});
});
});<div class = "row">
<a href = "https://dummyimage.com/600x120/000/fff">link 1</a>
</div>
<div class = "row">
<a href = "https://dummyimage.com/600x120/00f/f88">link 2</a>
</div>
<div class = "imgBox"><img src = ""/></div>Можете ли вы объяснить этот код по частям? Я новичок в js
Он делает то же, что и ваш код jQuery, так что должно объяснять, что делает этот код? Все эти методы объясняются на mdn: addEventListener, querySelectorAll, для каждого, селектор запросов.
Следуя инструкции из этой шпаргалки: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/
const ready = (callback) => {
if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
/* Do things after DOM has fully loaded */
document.querySelector(".row a").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(".imgBox img ").setAttribute('src', document.querySelector(".imgBox img ").getAttribute('href));
});
});
используйте const вместо var. Давайте не будем распространять плохие практики :)
@CristianTraìna достаточно честно, ответ отредактирован
Я всегда думал, что jQuery был JavaScript... В любом случае, можете ли вы предоставить HTML, к которому применяется этот скрипт?