代码之家 › 专栏 › 技术社区 › Kuzma

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

markup selector jquery-selectors jquery javascript

Kuzma · 技术社区 · 5 年前

我有cms,它以这样的方式呈现一个标记,我不能添加任何额外的 id 我是说, class 或 events 到元素。

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

1)。按类名查找元素并将其添加到后续元素中,( img ) 身份证件 名称

(第二章)。添加 onClick 归因于它

(第三章)。执行脚本 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;");
});

2 回复 | 直到 5 年前

T.J. Crowder 5 年前

jquery对象不是dom元素,它们是套 dom元素的。

要在集合中的所有元素上设置属性,请使用 attr 以下内容: element1.attr("id", "imgClickAndChange")
要设置属性,请使用 prop 以下内容: element1.prop("id", "imgClickAndChange") ( id 恰好是反映 身份证件 属性; src 同时也是属性和反射属性)。
要添加事件处理程序,请使用 on 以下内容: element1.on("click", changeImage) 是的。

一般来说, 二传手 jquery中的方法在集合中的所有元素上设置它们,并且 吸气剂 方法从第一集合中的元素(但也有例外)。

如果出于任何原因需要直接访问集合中的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 是的。

Muhammad Bilal 5 年前

使用这个:

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