0

我正在开展一个基于学校的项目，我们拥有的功能之一是学校查找器。

因为学校喜欢继续使用 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>
4

5 回答 5

1

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

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

于 2013-08-22T14:03:15.773 回答
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);
}
于 2013-08-22T13:44:27.900 回答
0

添加为具有 data-school-id 属性的元素保留的类。例如“学校元素”。

利用：

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'));
}
于 2013-08-22T14:01:00.457 回答
0

1）如果您不想使用 jQuery，则必须编写一个通过数据属性找到 DOM 榆树的函数（堆栈溢出中有很多答案 - 例如，当 querySelectorAll 不可用时，按属性获取元素不使用图书馆？）。这部分代码：

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）如果你想知道数据属性的属性，你可以这样做：

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

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

于 2013-08-22T14:06:55.273 回答
0 
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);
     }
}
于 2013-08-22T13:46:03.690 回答