Не могу добавить атрибуты к элементу с помощью jQuery

Question

У меня есть CMS, которая отображает разметку таким образом, что я не могу добавить дополнительные id, class или events к элементам.

Таким образом, я должен добавить их программно. Задача проста:

1). Найти элемент по имени класса и добавить к его преемнику (img) id name

2). добавить onClick атрибут к этому

3). выполнить скрипт onClick (следует поменять местами изображение и имя href ( макс. 3 изображения ))

JSFiddle

Вот фрагмент разметки:

<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;");
});

Answer 1

jQuery объекты не являются элементами DOM, они устанавливают элементов DOM.

• Чтобы установить атрибут для всех элементов в наборе, используйте attr: element1.attr("id", "imgClickAndChange")

• Чтобы задать свойство, используйте prop: element1.prop("id", "imgClickAndChange") (id оказываетсясвойство, отражающее атрибут id; src также является атрибутом и отраженным свойством).

• Чтобы добавить обработчик событий, используйте on: element1.on("click", changeImage).

Как правило, методы setter в jQuery устанавливают их для всех элементов набора, а методы getter получают из первый элемент в наборе (но есть исключения).

Если по какой-либо причине вам необходим прямой доступ к элементу (ам) 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.log(element1.length); // 0, no matching elements

var element1 = $('.to_change_inner').find('img'); // Works
console.log(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.

Answer 2

Используйте это:

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;");
});