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

时间:2013-08-22 13:41:55

标签: javascript

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

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

5 个答案:

答案 0 :(得分: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);
}

答案 1 :(得分:1)

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

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

答案 2 :(得分: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);
     }
}

答案 3 :(得分:0)

使用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'));
}

答案 4 :(得分:0)

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

中运行良好