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

Question

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

Answer 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方法从集合中的第一个元素获取（但有例外）。

如果出于任何原因需要直接访问集合中的DOM元素，则可以使用方括号表示法来进行操作，例如使用数组。

有关更多信息，请参见API文档和学习中心。

根据您的HTML，您在这里有一个错误：

element1 = $('.to_change_inner').children('img'); //find() also doesn't work

评论不正确，find将是您想要的，而不是children：

element1 = $('.to_change_inner').children('img'); //find() also doesn't work

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

您需要声明，该代码似乎也成为了我所谓的“隐式全球性恐怖”的牺牲品element1。