HTML / Javascript：将属性添加到HTML控件
[英]Html/Javascript: Add Attribute to an HTML Control
问题描述
Need: Find a way to add a valid tag/attribute/property to a normal html control. 
需要：找到一种将有效标签/属性/属性添加到普通html控件的方法。
What I have is some javascript/jquery adding a click event to a link that will show or hide a div. 我所拥有的是一些将单击事件添加到将显示或隐藏div的链接的javascript / jquery。 The idea is to do this using $(document).ready and an anonymous method to create the method called by onClick at the page load. 这样做的目的是使用$（document）.ready和一个匿名方法来创建页面加载时onClick调用的方法。 When clicked, a div will be shown with some text. 单击时，将显示带有一些文本的div。 This is all well and good except I can't figure out how to set up the text so that this can be done on the page load. 一切都很好，除了我不知道如何设置文本以便可以在页面加载时完成。 What I'd like is something like: 我想要的是这样的：
<a href="..." class="showItLink" textToShow="This is the text to show">HI</a>
so that I can do this: 这样我就可以做到这一点：
$(document).ready
(
function()
{
$("..showItLink").click
(
function(event)
{
var containerPosition;
var createdDiv;
//see if the div already exists
createdDiv = $(this).children(".postComment");
if (createdDiv.length == 0)
{
//This is where the attribute is used so that the CreateDiv
//method can take the textToShow and fill the div's innerText
//with it V V V V V V
createdDiv = CreateDiv(this.textToShow, "postComment");
$(this).append(createdDiv);
$(this).children(".postComment").hide();
}
$(createdDiv).toggle();
event.preventDefault();
}
);
}
);
Now besides not being xhtml valid (meh), this only works in IE. 现在除了不是有效的xhtml（meh）外，这仅在IE中有效。 Firefox just says it doesn't exist. Firefox只是说它不存在。 (this.textToShow) I could use something like rel or rev, but that seems just as hackish. （this.textToShow）我可以使用rel或rev之类的东西，但这似乎有点黑。 I was wondering if there is a valid way of doing this. 我想知道是否有一种有效的方法。
Solution from answer below 从下面的答案解决
comment = $(".showItLink").attr("comment");
...
createdDiv = CreateDiv(comment, "postComment");
Paired with: 搭配：
<a href="http://www.theironical.com" class="showItLink" comment="hihihi" >HI</a>
5 个解决方案
解决方案1
3 已采纳 2009-03-13 20:13:12
If you're using JQuery, just get and set the attributes with .attr(). 如果使用的是JQuery，则只需使用.attr（）获取并设置属性。
Get: this.attr("textToShow") 获取：this.attr（“ textToShow”）
Set: this.attr("textToShow", value) 设置：this.attr（“ textToShow”，value）
解决方案2
2 2009-03-13 20:03:07
The way you add an attribute to an html control is by using the element.setAttribute("attributeName", "attributeValue") where "element" is the element you want to add the attribute to. 将属性添加到html控件的方式是使用element.setAttribute（“ attributeName”，“ attributeValue”），其中“ element”是要将属性添加到的元素。
To get an attribute you use getAttribute("attributeName"); 要获取属性，请使用getAttribute（“ attributeName”）;
解决方案3
2 2009-03-14 01:32:14
You can't get away with adding custom attributes to HTML elements whilst still being valid. 在仍然有效的情况下，向HTML元素添加自定义属性并不能避免。 It will generally work in current browsers, but it's a bit fragile in that if you happen to pick a name that is in use (now or in the future) as an HTML or JavaScript property by any browser, the clash will stop it from working. 它通常可以在当前的浏览器中使用，但是它有点脆弱，如果您碰巧选择了任何浏览器正在使用的名称（现在或将来）作为HTML或JavaScript属性，则冲突将阻止它正常工作。
HTML5 proposes attributes whose names start with “data-” as valid extension mechanisms. HTML5建议使用名称以“ data-”开头的属性作为有效的扩展机制。 You could also consider namespaced elements in XHTML; 您还可以考虑XHTML中的命名空间元素。 this still isn't technically “valid XHTML” by the DTD but at least it is safe from collisions. 从技术上讲，这在DTD上仍然不是“有效的XHTML”，但至少可以避免冲突。
<a href="..." class="showItLink" textToShow="This is the text to show">HI
I suggest using the 'title' attribute for this particular purpose. 我建议将“ title”属性用于此特定目的。
解决方案4
0 2009-03-13 20:02:42
The best way to do this kind of thing is to hide the text in another element and then toggle that element. 进行此类操作的最佳方法是将文本隐藏在另一个元素中，然后切换该元素。 Try something like this: 尝试这样的事情：
<!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" xml:lang="en" lang="en">
<head>
<title>clear test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#show-it").click(function() {
$("#message").toggle();
});
});
</script>
</head>
<body>
<div>
<a id="show-it" href="javascript:void(0);">show it</a>
<div id="message" style="display:none;"> hidden message</div>
hello world
</div>
</body>
</html>
解决方案5
0 2009-03-14 02:37:32
如果您的textToShow属性是expando属性，则this.textToShow不会返回undefined，但是由于它是自定义属性，因此您需要使用jQuery的this.attr（“ textToShow”）或标准DOM this.getAttribute（“ textToShow” ）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.