Question

我正在开展一个以学校为基础的项目，其中一个功能就是找不到学校。

因为学校喜欢继续使用Windows XP并坚持使用Internet Explorer 1（双关语），我试图使用传统的javascript而不是jQuery来支持所有浏览器。

问题是，数据库中列出的学校被放入表格中，每个表格都有一个名为 data-school-id 的自定义属性，其值为 sch-X

当用户点击学校的表格单元格时，我真的被困在如何让javascript读取这些值。这是我目前的代码：

var schID = document.getElementById("data-school-id");
schID.addEventListener("click", function() {
    alert(schID.value);
}, false);

我需要抓取数值，虽然我已经知道如何做到这一点。它是javascript来理解动态属性，它是我坚持的每个表格单元格的价值。

每个表格单元格如下：

<td data-school-id="sch-123">
    <div class="pull-left sch-logo">
        <img src="#" width="100" height="100">
    </div>
    <div class="pull-left">
        <h3>School Name</h3>
        <p><strong>Headteacher:</strong> Mr. Foo Bar</p>
    </div>
</td>

Answer 1

使用getAttribute方法访问它：

schID.getAttribute("data-school-id");

更新

要将其转换为数字值，请将其换行：

var id = schID.getAttribute("data-school-id"),
    n = parseInt(id, 10);

我认为你的元素查找也会遇到麻烦。您确定表格单元格是这样创建的：

<td>
    <div id="data-school-id" data-school-id="123"/>
</td>

为什么不检查表格的HTML并在问题中提供更多内容？

更新2：

您需要向表中添加一个单击处理程序，并处理从TD元素冒出的事件。使用event.target或event.source（检查IE 8文档中的那些属性）。这将为您提供元素的引用：

function handler(evt) {
    evt = evt || window.event;

    var td = evt.targetElement,
        schoolId = td.getAttribute("data-school-id"),
        numSchoolId = parseInt(schoolId, 10);
}

Answer 2

我强烈建议您重温使用JQuery的想法，只需确保使用支持IE 6的旧版本（2.0之前） - 如果IE版本低于6.0，请礼貌地告诉他们必须更新浏览器如果他们拒绝 - 你在一个功能失调的环境中工作，找一份新工作。甚至微软也不会在2014年4月8日之后支持IE6 - XP将不再是他们所关心的。

我使用JQuery支持了相当多的IE6代码，效果很好。您的问题可能是IE6中糟糕的CSS支持，或其他不兼容性，但根据我的经验，它们不太可能是JQuery。如果继续沿着这条路走下去，你将拥有一个更加陷入IE领域的代码库。

Answer 3

function getElementWithAttribute(attribute)
{
  var allElements = document.getElementsByTagName('*');
  for (var i = 0; i < allElements.length; i++)
  {
    if (allElements[i].getAttribute(attribute))
    {
      return allElements[i];
    }
  }
  return null;
}

var el = getElementWithAttribute('data-school-id');

if(el != null){
    el.addEventListener("click", function() {
        alert(el.value);
     }
}

Answer 4

使用data-school-id属性添加为元素保留的类。例如，“school-elem”。

使用：

var schElems, i;

schElems = document.getElementsByClassName("school-elem");

for (i = 0; i < schElems.length; ++i) {
    alert(schElems[i].getAttribute('data-school-id'));
}

如果您无法添加类（或使用getElementsByClassName）：

var schElems, i;

function getElementsByAttr(attr) {
    var allElems, attrElems, i;
    allElems = document.getElementsByTagName('*');
    attrElems = [];
    for (i = 0; i < allElems.length; ++i) {
        if (allElems[i].hasAttribute(attr)) attrElems.push(allElems[i]);
    }
    return attrElems;
}

schElems = getElementsByAttr('data-school-id');

for (i = 0; i < schElems.length; ++i) {
    alert(schElems[i].getAttribute('data-school-id'));
}

Answer 5

1）如果你不想使用jQuery，你必须编写一个通过data-attribute找到DOM榆树的函数（Stack Overflow中有很多答案 - ex Get elements by attribute when querySelectorAll is not available without using libraries?）。这部分代码：

function getAllElementsWithAttribute(attribute)
{
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0; i < allElements.length; i++)
  {
    if (allElements[i].getAttribute(attribute)){
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

2）你必须添加听众'跨浏览器'。因为IE6-8不知道方法 - addEventListener它知道attachEvent。这部分代码：

function addEvent(elem, type, handler){
    if (elem.addEventListener){
       elem.addEventListener(type, handler, false)
    } else {
       elem.attachEvent("on"+type, handler)
    }
}

3）之后你可以像这样写一下：

var el = getAllElementsWithAttribute('data-school-id')[0],
    elClick = function(){ alert('1') };

addEvent(el, 'click', elClick);

4）如果你想知道data-attribute的属性，你可以这样做：

 var attr = el.getAttribute('data-school-id'); // "sch-123"

getAttribute在IE8 http://msdn.microsoft.com/en-us/library/ie/ms536429(v=vs.85).aspx

中运行良好

具有动态值的自定义HTML属性

5 个答案: