Невозможно добавить атрибуты к элементу с помощью jQuery
У меня есть CMS, которая рендерит разметку таким образом, что я не могу добавить к элементам дополнительные id, class или events.
Таким образом, я должен добавить их программно. Задача проста:
1). Найдите элемент по имени класса и добавьте к его преемнику (img) id имя
2). добавьте к нему атрибут onClick
3). выполнить скрипт onClick (следует поменять местами изображение и имя ссылки (максимум 3 изображения))
Вот кусок разметки:
<div class = "single-image text-center to_change_inner">
<div class = "content">
<div class = "single-image-container">
<img class = "img-responsive" src = "https://picsum.photos/200/300">
</div>
</div>
</div>
<div>
<a id = "btn-1559300726188">Click</a>
</div>
А вот JQuery:
jQuery(function($) {
element1 = $('.to_change_inner').children('img'); //find() also doesn't work
element1.id = "imgClickAndChange";
if (element1.addEventListener) {
element1.addEventListener("click", changeImage, false);
} else {
if (element1.attachEvent) {
element1.attachEvent("click", changeImage);
}
}
});
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "https://picsum.photos/200/300")
{
document.getElementById("imgClickAndChange").src = "https://picsum.photos/20/30";
}
else
{
document.getElementById("imgClickAndChange").src = "https://picsum.photos/200/300";
}
}
window.addEventListener('load', function(){
document.getElementById('btn-1559300726188').setAttribute("onclick", "imgClickAndChange(); return true;");
});
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Объекты jQuery не являются элементами DOM, они представляют собой наборы элементов DOM.
Чтобы установить атрибут для всех элементов в наборе, используйте
attr:element1.attr("id", "imgClickAndChange")Чтобы установить свойство, используйте
prop:element1.prop("id", "imgClickAndChange")(idоказывается свойством, отражающим атрибутid;srcтакже является как атрибутом, так и отраженным свойством).Чтобы добавить обработчик события, используйте
on:element1.on("click", changeImage).
В общем, методы сеттер в jQuery устанавливают их на все элементы в наборе, а методы добытчик получают из элемента первый в наборе (но есть исключения).
Если по какой-либо причине вам нужно получить прямой доступ к элементу (элементам) DOM в наборе, вы можете сделать это с помощью скобок, как с массивом.
Подробнее в документы API и учебный центр.
Согласно вашему HTML, у вас здесь ошибка:
element1 = $('.to_change_inner').children('img'); //find() also doesn't work
Комментарий неверный, find было бы то, что вы хотите, а не children:
var element1 = $('.to_change_inner').children('img'); // Doesn't work
console.info(element1.length); // 0, no matching elements
var element1 = $('.to_change_inner').find('img'); // Works
console.info(element1.length); // 1, there was a matching element<div class = "single-image text-center to_change_inner">
<div class = "content">
<div class = "single-image-container">
<img class = "img-responsive" src = "https://picsum.photos/200/300">
</div>
</div>
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Этот код также, кажется, становится жертвой того, что я называю Ужас неявных глобальных переменных, вам нужно объявить element1.
Использовать этот:
jQuery(function($) {
element1 = $('.to_change_inner img');
element1.attr('id',"imgClickAndChange");
element1.on('click',function(){changeImage();})
});
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "https://picsum.photos/200/300")
{
document.getElementById("imgClickAndChange").src = "https://picsum.photos/20/30";
}
else
{
document.getElementById("imgClickAndChange").src = "https://picsum.photos/200/300";
}
}
window.addEventListener('load', function(){
document.getElementById('btn-1559300726188').setAttribute("onclick", "imgClickAndChange(); return true;");
});
Дампы кода не являются ответами полезный. Что вы изменили? Почему ты его изменил? Где ОП может узнать больше?
Если вы все равно используете jQuery, почему бы не использовать его API обработки событий?