无法使用 jQuery 向元素添加属性

Question

我有 CMS，它以我无法向元素添加任何额外的 id、class 或 events 的方式呈现标记。

在这种情况下，我必须以编程方式添加它们。任务很简单：

1).按 class 名称查找元素并添加到其后继者，(img) id 名称

2).向其添加 onClick 属性

3).执行脚本 onClick（应该交换图像和 href 的名称（最多 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;");
});

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 个元素，您可以像使用数组一样使用括号表示法来实现。

the API docs and the learning center 中的更多内容。

根据您的 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>

该代码似乎也成为我所谓的 The Horror of Implicit Globals 的牺牲品，您需要声明 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;");
});

无法使用 jQuery 向元素添加属性

Can't add attributes to element with jQuery

javascript

markup

jquery

selector

jquery-selectors