个人中心
gpt4 book ai didi

javascript - 我无法在 javascript 中获取图像的 id

转载 作者：行者123 更新时间：2023-12-02 16:48:28 25 4
gpt4 key购买 nike

我想在鼠标滚轮上的 JavaScript 中获取我的 img 的 id，但是当我执行 getElementById 时，它告诉我长度为 null

这是我放置图片的函数

function parse_data(data)
{
 var json = data;
 var obj = JSON.parse(json);
 var buff = "";

 for(var i in obj)
 {
  //document.write('<br>' + i + '<br>');                                                                                                                                                                                                 
  for (var j in obj[i])
  {
        if (obj[i][j] == true)
          buff += "<a href=\"#\" onmousewheel=\"test()\" ><img id=\"obj[i]\" src=\"../images/pix_green.jpg\" border=\"0\" /></a>";
        else
          buff += "<a href=\"#\" onmousewheel=\"test()\" ><img id=\"obj[i]\" src=\"../images/pix_gray.jpg\" border=\"0\" /></a>";
  }
    buff += "<br>";
 }
  document.getElementById('frisekk').innerHTML = buff;
}

这是我想要获取鼠标滚轮上的 img 的 id 的函数

function test()
{
  var obj = document.getElementById('img');

  alert(obj.length); //obj.length is null...
  if (event.wheelDelta >= 120)
    unit -= 60;
  else
    unit += 60;
 request(readData);
}

我怎样才能得到我的img的id？

这里有所有的html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
<script>
 var unit = 60;
 var date = 'Mon Oct 20 2014 19:25:00 GMT (CET)';

 function request(callback)
 {
  var xhr = getXMLHttpRequest();
  var frise = 600;
  var template = 'lab';

  xhr.onreadystatechange = function()
  {
   if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
    callback(xhr.responseText);
  };

  xhr.open("GET", "a.php?Frise=" + frise + "&Unit=" + unit + "&Template=" + template + "&Date=" + date, true);
  xhr.send(null);
}

function readData(sData)
{
 parse_data(sData);
}

function parse_data(data)
{
 var json = data;
 var obj = JSON.parse(json);
 var buff = "";
 for(var i in obj)
 {
   //document.write('<br>' + i + '<br>');                                                                                                                                                                                                                                                                                                
   for (var j in obj[i])
   {
      //document.write(j + "=" + obj[i][j] + '<br>');                                                                                                                                                                                                                                                                                   
      if (obj[i][j] == true)
        buff += "<a href=\"#\" onmousewheel=\"test()\" ><img id=\"obj[i]\" src=\"../images/pix_green.jpg\" border=\"0\" /></a>";
      else
        buff += "<a href=\"#\" onmousewheel=\"test()\" ><img id=\"obj[i]\" src=\"../images/pix_gray.jpg\" border=\"0\" /></a>";
    }
   buff += "<br>";
  }
  document.getElementById('frisekk').innerHTML = buff;
}

function test()
{
 var obj = document.getElementById('img');
 alert(obj.length);
 if (event.wheelDelta >= 120)
   unit -= 60;
 else
   unit += 60;
 request(readData);
}

</script>


<script>
function getXMLHttpRequest()
{
 var xhr = null;
 if (window.XMLHttpRequest || window.ActiveXObject) {
   if (window.ActiveXObject)
   {
     try 
     {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } 
     catch(e)
     {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
    } 
    else 
    {
      xhr = new XMLHttpRequest();
    }
   }
   else 
   {
    alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
    return null;
   }
  return xhr;
 }
</script>
<span id="frisekk"> <br/> </span>
</head>
<body>
<form>
<p>
<input type="button" onclick="request(readData);" value="Exécuter" />
</p>
</form>
</body>
</html>

最佳答案

document.getElementById不会为您获取 id，它会通过传递的 id 获取元素。由于您没有发布 HTML，我无法确定您的 <img /> 是否标签的 ID 为 img ，但我假设不是。您要找的是document.getElementsByTagName('img')获取页面上的 tevery img 元素，然后使用循环查找您需要的元素(或者添加 [0] 如果您知道只有一个元素可以选择第一个元素)。

所以你有两个选择:

  1. 向您的元素添加 ID(最佳选择)

<img src="path/to/image.jpg" id="my_image" />
var finalElement = document.getElementById("my_image");

  • 查找所有带有标签名“img”的元素，然后在它们中搜索右侧的元素

    • <img src="path/to/image.jpg" />
    var elements = document.getElementsByTagName("img");
    var finalElement = false;
    for(var i = elements.length -1; i >= 0; i--){
    // match your element and return
    if(/* criteria */){
    finalElement = elements[i];
    break;
    }
    }

  • 您的页面上只有一张图片并选择该图片:

    • <img src="path/to/image.jpg" id="my_image" />
    var finalElement = document.getElementsByTagName("img")[0];

    更新

    您的onmousewheel属性可以受支持，但是您需要稍微不同，因为您的链接有 onmousewheel事件。 

    <!-- add the 'this' keyword to your test() function to pass the <a> element -->
    <a href="#" onmousewheel="test(this)"><img src="path/to/image.jpg" /></a>

    使用此结构(一个 <img> 嵌套在 <a> 中)，您可以传递 <a>使用 this 到该函数关键字。

    /* Add a variable to receive your <a> in your test() function. */
    function test(link){
        /* Use childNodes[0] to select the first child element of the a. */
        var image = link.childNodes[0];
        /* Will alert '1' if the <a> has a child, will alert '0' if the <a> is empty.*/
        alert(image.length);
    }

    现在您可以轻松访问 a 元素的唯一子元素(图像)，并用它执行某些操作。

    我不确定元素是否支持 onmousehweel，因此请考虑 onclick或onmouseover来测试这个功能。如果您决定使用 onmouseover 进行测试，使用console.log记录而不是 alert ，否则您会被警报淹没。

    关于javascript - 我无法在 javascript 中获取图像的 id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26906977/

    25 4 0
    文章推荐： Javascript 查找两个二维数组之间的共同值
    文章推荐： promise - 为什么 switchMap 运算符在与 Promise 一起使用时仅发出最后一个值？
    文章推荐： asp.net - 当用户的角色没有足够的权限时，将用户从 web.config 重定向到另一个页面
    文章推荐： javascript - 获取文本框值而不是自动完成值javascript
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com