我正在开展一个以学校为基础的项目,其中一个功能就是找不到学校。
因为学校喜欢继续使用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>
答案 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
中运行良好