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

Posted 2023-05-09

【中文标题】无法使用 jQuery 向元素添加属性

【英文标题】：Can't add attributes to element with jQuery

【发布时间】：2019-11-16 18:57:58

【问题描述】：

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

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

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

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

【问题讨论】：

如果你还在使用 jQuery，为什么不使用它的事件处理 API？

【参考方案1】：

jQuery 对象不是 DOM 元素，它们是 DOM 元素的集合。

要为集合中的所有元素设置属性，请使用attr：element1.attr("id", "imgClickAndChange")

要设置属性，请使用prop：element1.prop("id", "imgClickAndChange")（id 恰好是反映id 属性的属性；src 既是属性又是反射属性）。

要添加事件处理程序，请使用on：element1.on("click", changeImage)。

一般来说，jQuery 中的 setter 方法将它们设置在集合中的所有元素上，而 getter 方法从集合中的 first 元素获取设置（但也有例外）。

如果出于某种原因您需要直接访问集合中的 DOM 元素，您可以像使用数组一样使用方括号表示法。

the API docs 和 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。

【参考方案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;");
);

【讨论】：

代码转储不是有用的答案。你改变了什么？ 为什么你改变了它？ OP 在哪里可以了解更多信息？