Question

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

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

1）。通过类名称查找元素并将其添加到其后继者，{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)。

通常，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。

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向元素添加属性

2 个答案: