时间戳

首页 > 解决方案 > 无法使用 jQuery 向元素添加属性

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

问题描述

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

标签： javascriptjqueryjquery-selectorsselectormarkup

解决方案

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：

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。

推荐阅读