如何为某些HTML标签存储任意数据

2020/10/02 07:01 · javascript ·  · 0评论

我正在制作一个页面,该页面具有javascript提供的一些交互功能。举例来说:发送AJAX请求以获取文章内容,然后在div中显示该数据的链接。显然,在此示例中,我需要每个链接来存储额外的信息:文章的ID。我一直在处理的方式是将这些信息放在href链接中,如下所示:

<a class="article" href="#5">

然后,我使用jQuery查找a.article元素并附加适当的事件处理程序。(不要太在意可用性或语义,这只是一个例子)

无论如何,此方法有效,但闻起来有点,并且根本无法扩展(如果click函数具有多个参数,会发生什么?如果其中一些参数是可选的,会怎样?)

显而易见的答案是在元素上使用属性。我的意思是,这就是他们的意思吧?(有点儿)。

<a articleid="5" href="link/for/non-js-users.html">

我最近的问题中,我问这个方法是否有效,事实证明,如果没有定义自己的DTD(我不是),那么就不能,它是无效或可靠的。常见的回答是将数据放入class属性中(尽管这可能是由于我的选择不佳的示例所致),但是对我来说,这甚至更难闻。是的,这在技术上是有效的,但这不是一个很好的解决方案。

我过去使用的另一种方法是实际生成一些JS,然后将其插入到<script>标签中的页面中,以创建与该对象相关联的结构。

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

但这可能是维持屁股的真正痛苦,并且通常非常混乱。

因此,为了解决这个问题,如何存储HTML标签的任意信息

您正在使用哪个版本的HTML?

在HTML 5中,使用以data-开头的自定义属性是完全有效的,例如

<div data-internalid="1337"></div>

在XHTML中,这不是真的有效。如果您在XHTML 1.1模式下,浏览器可能会抱怨它,但是在1.0模式下,大多数浏览器只会默默地忽略它。

如果我是你,我将遵循基于脚本的方法。您可以使它在服务器端自动生成,这样维护起来就不会麻烦。

如果您已经在使用jQuery,则应该利用“数据”方法,这是使用jQuery在dom元素上存储任意数据的推荐方法。

存储东西:

$('#myElId').data('nameYourData', { foo: 'bar' });

要检索数据:

var myData = $('#myElId').data('nameYourData');

这就是全部内容,但请查看jQuery文档以获取更多信息/示例。

换一种方式,我个人不会使用它,但是它可以工作(确保您的JSON有效,因为eval()很危险)。

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

任意属性无效,但在现代浏览器中绝对可靠。如果您通过javascript设置属性,那么您也不必担心验证。

另一种方法是在javascript中设置属性。jQuery为此提供了一个很好的实用程序方法,或者您可以自己滚动。

几乎所有可能的浏览器都可以使用的黑客方法是使用这样的开放类: <a class='data\_articleid\_5' href="link/for/non-js-users.html>;

对于纯粹主义者而言,这并不是那么优雅,但是它得到了普遍支持,符合标准并且非常易于操作。看起来确实是最好的方法。如果serialize修改复制你的标签,否则做几乎任何事情,data会保持连接,拷贝等。

唯一的问题是您不能以这种方式存储不可序列化的对象,并且如果在其中放置非常大的对象可能会受到限制。

第二种方法是使用伪造的属性,例如:<a articleid='5' href="link/for/non-js-users.html">

这更优雅,但违反标准,而且我不确定100%支持。许多浏览器都完全支持它,我认为IE6支持JS访问,但不支持CSS selectors(在这里并不重要),也许某些浏览器会完全混乱,您需要检查一下。

做一些有趣的事情,例如序列化和反序列化会更加危险。

ids纯正JS尝试复制标签外,使用哈希通常可以工作。如果有tag <a href="..." id="link0">,请通过标准JS方法将其复制,然后尝试修改data仅附接到一个副本的附件,否则将修改另一个副本。

如果您不复制tags或使用只读数据这不是问题如果您复制tags并对其进行了修改,则需要手动处理。

使用jQuery,

储藏: $('#element_id').data('extra_tag', 'extra_info');

检索: $('#element_id').data('extra_tag');

我知道您当前正在使用jQuery,但是如果您内联定义了onclick处理程序,该怎么办。然后,您可以执行以下操作:

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>

您可以使用隐藏的输入标签。我在w3.org上没有收到以下验证错误:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="content-type" />
    <title>Hello</title>
  </head>
  <body>
    <div>
      <a class="article" href="link/for/non-js-users.html">
        <input style="display: none" name="articleid" type="hidden" value="5" />
      </a>
    </div>
  </body>
</html>

使用jQuery,您将获得带有以下内容的文章ID(未经测试):

$('.article input[name=articleid]').val();

但是我建议您使用HTML5。

为什么不利用已有的有意义的数据,而不是添加任意数据?

即使用<a href="/articles/5/page-title" class="article-link">,然后您可以以编程方式获取页面上的所有文章链接(通过类名)和文章ID(将regex/articles\/(\d+)/匹配this.href)。

作为jQuery用户,我将使用Metadata插件HTML看起来很干净,可以验证,并且您可以嵌入任何可以使用JSON表示法描述的内容。

我主张使用“ rel”属性。XHTML进行验证,很少使用属性本身,并且可以有效地检索数据。

因此,应该有四个选择:

  1. 将数据放在id属性中。
  2. 将数据放入任意属性
  3. 将数据放在类属性中
  4. 将您的数据放在另一个标签中

http://www.shanison.com/?p=321

这是个好建议。感谢@Prestaul

如果您已经在使用jQuery,则应该利用“数据”方法,这是使用jQuery在dom元素上存储任意数据的推荐方法。

的确如此,但是如果您想在纯HTML中存储任意数据怎么办?这是另一种选择...

<input type="hidden" name="whatever" value="foobar"/>

将数据放在隐藏输入元素的名称和值属性中。如果服务器正在生成HTML(即PHP脚本或其他),并且您的JavaScript代码稍后将使用此信息,则这可能很有用。

诚然,这不是最干净的方法,但是它是替代方法。它与所有浏览器兼容,并且是有效的XHTML。您不应该使用自定义属性,也不要使用带有'data-'前缀的属性,因为它可能不适用于所有浏览器。并且,此外,您的文档不会通过W3C验证。

您可以使用您自己的随机元素(<span data-randomname="Data goes here..."></span>)的属性的数据前缀,但这仅在HTML5中有效。因此,浏览器可能会抱怨有效性。

您也可以使用<span style="display: none;">Data goes here...</span>标签。但是这种方式不能使用属性函数,并且如果css和js被关闭,那么这也不是一个整洁的解决方案。

但是我个人更喜欢以下内容:

<input type="hidden" title="Your key..." value="Your value..." />

在任何情况下,输入都将被隐藏,属性是完全有效的,并且如果它在<form>标签内,则不会被发送,因为它没有任何名称,对吗?最重要的是,这些属性确实很容易记住,并且代码看起来很好并且易于理解。您甚至可以在其中添加一个ID属性,因此您也可以轻松地使用JavaScript对其进行访问,并使用来访问键值对input.title; input.value

一种可能是:

  • 创建一个新的div来保存所有扩展/任意数据
  • 做一些确保该div不可见的操作(例如CSS加上div的class属性)
  • 将扩展的/任意的数据放在此不可见的div内的[X] HTML标记内(例如,作为文本在表格的单元格内,或其他类似的内容)

另一种方法是使用以下语法将key:value对存储为简单类:

<div id="my_div" class="foo:'bar'">...</div>

这是有效的,可以使用jQuery选择器或自定义函数轻松检索。

在我以前的雇主那里,我们一直使用自定义HTML标记来保存有关表单元素的信息。问题是:我们知道用户被迫使用IE。

当时对于FireFox来说效果不佳。我不知道FireFox是否更改了此设置,但是请注意,读者的浏览器可能不支持将自己的属性添加到HTML元素。

如果您可以控制读者使用的浏览器(例如,公司的内部Web小程序),则请务必尝试一下。会疼什么,对吗?

这就是我为您提供Ajax页面的方法。这是一种非常简单的方法。

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

它的工作原理基本上是查看所有具有“ ajx”类的网址,并替换关键字并添加#号...因此,如果关闭js,则这些网址将照常运行... all“ apps”(网站的每个部分)都有自己的关键字...因此,我需要做的就是添加到上面的js数组中以添加更多页面...

因此,例如,我当前的设置设置为:

 var objApps= ['ads','user'];

因此,如果我有一个网址,例如:

www.domain.com/ads/3923/bla/dada/bla

js脚本将替换/ ads /部分,因此我的URL最终被

www.domain.com/ads/#p=3923/bla/dada/bla

然后我使用jquery bbq插件相应地加载页面...

http://benalman.com/projects/jquery-bbq-plugin/

我发现元数据插件是解决带有html标记的任意数据的一种极好的解决方案,该方式使jQuery易于检索和使用。

重要提示:您包含的实际文件只有5 kb,而不是37 kb(这是完整下载包的大小)

这是一个示例,用于存储生成Google Analytics(分析)跟踪事件时使用的值(注意:data.label和data.value恰好是可选参数)

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>

在html中,我们可以在属性名称之前存储带有前缀“ data-”的自定义属性,例如

<p data-animal='dog'>This animal is a dog.</p>检查文件

我们可以使用jQuery这样的属性来动态设置和获取属性,例如:如果我们有ap标签,例如

<p id='animal'>This animal is a dog.</p>

然后,为上面的标签创建一个名为“ breed”的属性,我们可以编写:

$('#animal').attr('data-breed', 'pug');

要随时检索数据,我们可以编写:

var breedtype = $('#animal').data('breed');

只要您的实际工作是在服务器端完成的,为什么仍然需要在输出的html标记中使用自定义信息?您需要在服务器上知道的所有内容是带有自定义信息的任何类型的结构列表的索引。我认为您正在将信息存储在错误的位置。

我将认识到,尽管不幸,但在很多情况下,正确的解决方案不是正确的解决方案。在这种情况下,我强烈建议您生成一些JavaScript来保存额外的信息。

多年后:

这个问题是在data-...属性随HTML 5出现成为有效选项之前大约三年发布的,因此事实已经发生了变化,我给出的原始答案不再适用。现在,我建议改为使用数据属性

<a data-articleId="5" href="link/for/non-js-users.html">

<script>
    let anchors = document.getElementsByTagName('a');
    for (let anchor of anchors) {
        let articleId = anchor.dataset.articleId;
    }
</script>
本文地址:http://javascript.askforanswer.com/ruheweimouxiehtmlbiaoqiancunchurenyishuju.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!