Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
221 views
in Technique[技术] by (71.8m points)

javascript - 如何为某些HTML标记存储任意数据(How to store arbitrary data for some HTML tags)

I'm making a page which has some interaction provided by javascript.(我正在制作一个由javascript提供一些交互的页面。)

Just as an example: links which send an AJAX request to get the content of articles and then display that data in a div.(仅作为示例:发送AJAX请求以获取文章内容然后在div中显示该数据的链接。) Obviously in this example, I need each link to store an extra bit of information: the id of the article.(显然在这个例子中,我需要每个链接来存储额外的信息:文章的ID。) The way I've been handling it in case was to put that information in the href link this:(我一直在处理它的方式是将这些信息放在href链接中:) <a class="article" href="#5"> I then use jQuery to find the a.article elements and attach the appropriate event handler.(然后我使用jQuery来查找a.article元素并附加相应的事件处理程序。) (don't get too hung up on the usability or semantics here, it's just an example)((不要太在意这里的可用性或语义,这只是一个例子)) Anyway, this method works, but it smells a bit, and isn't extensible at all (what happens if the click function has more than one parameter? what if some of those parameters are optional?)(无论如何,这种方法有效,但它有点味道 ,根本不可扩展(如果click函数有多个参数会发生什么?如果其中一些参数是可选的,会怎样?)) The immediately obvious answer was to use attributes on the element.(显而易见的答案是在元素上使用属性。) I mean, that's what they're for, right?(我的意思是,这就是他们的目的,对吗?) (Kind of).((的种类)。) <a articleid="5" href="link/for/non-js-users.html"> In my recent question I asked if this method was valid, and it turns out that short of defining my own DTD (I don't), then no, it's not valid or reliable.(在我最近的一个问题中,我问这个方法是否有效,结果是没有定义我自己的DTD(我没有),那么不,它是无效的或可靠的。) A common response was to put the data into the class attribute (though that might have been because of my poorly-chosen example), but to me, this smells even more.(一个常见的反应是将数据放入class属性中(虽然这可能是因为我选择不当的例子),但对我来说,这更令人闻到。) Yes it's technically valid, but it's not a great solution.(是的,它在技术上是有效的,但它不是一个很好的解决方案。) Another method I'd used in the past was to actually generate some JS and insert it into the page in a <script> tag, creating a struct which would associate with the object.(我过去使用的另一种方法是实际生成一些JS并将其插入到<script>标记的页面中,创建一个与该对象关联的结构。) var myData = { link0 : { articleId : 5, target : '#showMessage' // etc... }, link1 : { articleId : 13 } }; <a href="..." id="link0"> But this can be a real pain in butt to maintain and is generally just very messy.(但这可能是维持对接的真正痛苦,而且通常只是非常混乱。) So, to get to the question, how do you store arbitrary pieces of information for HTML tags ?(那么,为了解决这个问题, 你如何为HTML标签存储任意信息 ?)   ask by nickf translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Which version of HTML are you using?(您使用的是哪个版本的HTML?)

In HTML 5, it is totally valid to have custom attributes prefixed with data- , eg(在HTML 5中,拥有带有数据前缀的自定义属性是完全有效的,例如) <div data-internalid="1337"></div> In XHTML, this is not really valid.(在XHTML中,这不是真正有效的。) If you are in XHTML 1.1 mode, the browser will probably complain about it, but in 1.0 mode, most browsers will just silently ignore it.(如果您处于XHTML 1.1模式,浏览器可能会抱怨它,但在1.0模式下,大多数浏览器都会默默地忽略它。) If I were you, I would follow the script based approach.(如果我是你,我会遵循基于脚本的方法。) You could make it automatically generated on server side so that it's not a pain in the back to maintain.(你可以在服务器端自动生成它,这样就不会让后面的人感到痛苦。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...